Объединить несколько данных в компоненте .vue

Question

У меня есть компонент country.vue.

Я делаю цикл для.И в этом цикле я хотел бы собрать только названия стран в зависимости от локали приложения.

Чтобы собрать локаль, я создаю новые данные под названием «local».Я хотел бы объединить эту локаль в моем: label.

<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')
                }
            },
             …

Я хотел бы сделать что-то вроде этого:

<el-option
    v-for="country in countries"
    :key="country.name"
    :value="country.name"
    :label="country.translations. ' + "locale" . ">
</el-option>

Спасибо заваша помощь

Answer 1

Вы можете использовать встроенный в JavaScript метод доступа к скобочным обозначениям , чтобы выполнить это, например так:

<el-option
    v-for="country in countries"
    :key="country.name"
    :value="country.name"
    :label="country.translations[locale]">
</el-option>