In my country.vue component, I am implementing a loop to collect only the names of countries based on the locale of the application.
To retrieve the locale, I have created a new data property called "local". I want to include this locale in my :label attribute.
<template>
<li>
<el-option
v-for="country in countries"
:key="country.name"
:value="country.name"
:label="country.translations.fr">
</el-option>
</li>
<script>
export default {
data() {
return {
countries: [],
locale: document.querySelector('html').getAttribute('lang')
}
},
…
I am looking for a way to achieve something like this:
<el-option
v-for="country in countries"
:key="country.name"
:value="country.name"
:label="country.translations.{{locale}}">
</el-option>
Any assistance would be greatly appreciated. Thank you!