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的内置Bracket Notation Property Accessor完成此操作，如下所示：

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

在.vue组件中合并多个数据

1 个答案: