Vue i18n场景下v-for如何动态拼接key读取多语言JSON对应字段

核心问题原因 #

你的写法错误是因为对JavaScript对象的动态属性访问规则不熟悉：item.name_[$i18n.locale]的逻辑是尝试访问item下name_对象的对应locale属性，但你实际的字段名是name_en、name_de这类完整拼接的字符串，需要先拼接出完整键名再用方括号访问。

正确基础语法 #

如果你的每个item的多语言字段前缀固定为name，可以直接按下面的写法修正：

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

针对你现有JSON结构的优化方案 #

你给出的示例JSON中，第一个item的字段前缀是name，第二个是year，直接写死前缀会导致第二个item取不到值，推荐两种适配方案：

方案1：统一多语言字段前缀（推荐）

调整JSON结构，所有多语言值的字段前缀统一，例如都用label：

items: [
  {
    "label_en": "Name",
    "label_de": "Name"
  },
  {
    "label_en": "Year",
    "label_de": "Jahr"
  }
]

对应模板写法：

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

方案2：给每个item加字段标识前缀

如果不能修改现有多语言字段的命名，给每个item新增key字段标识前缀：

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

对应模板写法：

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

扩展优化 #

可以封装一个全局方法简化模板逻辑，避免重复写拼接代码：

// 全局注册或者组件内定义方法
methods: {
  getLocalValue(item, prefix) {
    return item[`${prefix}_${this.$i18n.locale}`]
  }
}

模板中直接调用即可：

<p>{{ getLocalValue(item, 'name') }}</p>

内容的提问来源于stack exchange，提问作者karzol73