如何实现Vue i18n对v-for循环的字符串数组动态多语言翻译

问题原因 #

你之前的写法失效是因为 data 选项的返回值是组件初始化阶段一次性计算的静态值，$t() 方法在此时只会返回当前locale对应的字符串，后续locale切换时不会触发data的重新计算，因此翻译不会更新。

解决方案1（最推荐）：模板内执行翻译 #

把数组中存储的text字段改为翻译key，在v-for渲染的模板阶段再调用$t方法执行翻译，翻译逻辑会随locale变化自动响应：

修改后的组件配置： #

export default {
  name: "HelloWorld",
  data() {
    return {
      items: [
        {
          // 存储翻译key而非翻译后的静态字符串
          textKey: "whatsNext.components",
          name: "vuetifyjs vuetify-loader",
        },
        {
          textKey: "whatsNext.selectLayout",
          name: "vuetifyjs vuetify",
        },
        {
          textKey: "whatsNext.frequentQuestion",
          name: "vuetifyjs awesome-vuetify",
        },
      ],
    };
  },
};

修改后的模板代码： #

<template>
  <div v-for="item in items" :key="item.name">
    <!-- 渲染时动态调用翻译方法 -->
    {{ $t(item.textKey) }}
  </div>
</template>

解决方案2：将items定义为计算属性 #

如果你的数组配置需要做额外逻辑处理，可以把整个items放到computed计算属性中，计算属性会随i18n的locale响应式更新：

export default {
  name: "HelloWorld",
  computed: {
    items() {
      return [
        {
          text: this.$t("whatsNext.components"),
          name: "vuetifyjs vuetify-loader",
        },
        {
          text: this.$t("whatsNext.selectLayout"),
          name: "vuetifyjs vuetify",
        },
        {
          text: this.$t("whatsNext.frequentQuestion"),
          name: "vuetifyjs awesome-vuetify",
        },
      ]
    }
  }
}

模板无需修改，直接用v-for="item in items"即可正常响应语言切换。

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