v-for 动态变量答案

【问题标题】：v-for with dynamic variablev-for 动态变量
【发布时间】：2021-06-11 07:33:18
【问题描述】：

我正在使用 i18n 开发一个 Vue 应用程序，并希望以所选语言列出大型 JSON 文件中的项目。

这是一个示例 JSON 文件：

items: [
  {
    "name_en": "Name",
    "name_de": "Name"
  },
  {
    "year_en": "Year",
    "year_de": "Jahr"
  }
]

我想像这样用 v-for 获取项目：

<div v-for="(item, index) in data.items" :key="index">
     <p {{item.name_[$i18n.locale]}} </p>
</div>

$i18n.local 删除当前语言代码，例如“en”或“de”。但是获取 item.name_en 或 item.name_de 的正确语法是什么？

感谢您的所有建议！

【问题讨论】：

【解决方案1】：

你快到了：只是方括号放错了位置 + 对连接字符串有一点帮助：

 <p>{{ item['name_' + $i18n.locale] }}</p>

但是，我不是模板内字符串插值的最大粉丝（个人喜好）。您可以考虑将该逻辑卸载/抽象到计算属性中：

computed: {
    i18nameKey() {
        return `name_${this.$i18n.locale}`;
    }
}

然后，您可以像这样在模板中使用i18nameKey：

<p>{{ item[i18nameKey] }}</p>

【讨论】：