如何翻译 v-for 数据字符串数组的 Vue i18n答案

【问题标题】：How to Translate Vue i18n of v-for data Array of String如何翻译 v-for 数据字符串数组的 Vue i18n
【发布时间】：2021-11-18 08:50:48
【问题描述】：

我是 vuejs 的新手，我的项目具有多语言功能，德语和英语，但是我对循环遍历列表的字符串数据数组有疑问，我不知道如何翻译它，这里是我的意思

export default {
  name: "HelloWorld",

  data() {
    return {
      items: [
        {
          text: "Explore Components",
          name: "vuetifyjs vuetify-loader",
        },
        {
          text: "Select a layout",
          name: "vuetifyjs vuetify",
        },
        {
          text: "Frequently Asked Questions",
          name: "vuetifyjs awesome-vuetify",
        },
      ],
    };
  },
};

我想把 items.text 翻译成德语和英语，这是我的 de.json 和 en.json

// de.json
{
  "whatsNext": {
    "components": "Komponenten erforschen",
    "selectLayout": "Layout wählen",
    "frequentQuestion": "Häufig gestellte Fragen"
  }
}

// en.json
{
"whatsNext": {
    "components": "Explore components",
    "selectLayout": "Select a layout",
    "frequentQuestion": "Frequently Asked Questions"
  }
}

通常你可以{{ $t('whatsNext.components') }} ，但由于它在 v-for 中循环，我不知道怎么做，有人可以帮忙吗？

我试过了，但它不起作用，只能渲染德语，因为语言环境是德语

data() {
    return {
      items: [
        {
          text: this.$root.$t("whatsNext.components"),
          name: "vuetifyjs vuetify-loader",
        },
        {
          text: this.$root.$t("whatsNext.selectLayout"),
          name: "vuetifyjs vuetify",
        },
        {
          text: this.$root.$t("whatsNext.frequentQuestion"),
          name: "vuetifyjs awesome-vuetify",
        },
      ],
    };
  },

【问题讨论】：

因此您并不要求网站支持多种语言并以用户选择的任何语言呈现。您要求在一个页面上同时显示多种语言？
不不，我只要求以用户选择的任何语言呈现@bassxzero
I tried this but it doesn't work and only renders german, since the locale in German 您是否尝试将语言环境设置为英语？大多数 i18n 包会尝试检测当前在浏览器中使用的语言环境，并使用该语言环境进行渲染。
我确实尝试过：` locale: "de", fallbackLocale: "en"` or en and en or en and de, 但它只呈现一种语言@bassxzero
如果您使用谷歌浏览器测试您的应用程序，请下载此扩展程序。它将让您轻松切换您正在使用的语言环境，以便您可以测试站点的两个版本。我确信其他浏览器也有类似的扩展/插件。 chrome.google.com/webstore/detail/locale-switcher/…

标签： vue.js internationalization vuetify.js vue-i18n

【解决方案1】：

我不会翻译 data() 中的文本，而是只包含那里的静态翻译键：

data() {
  return {
    items: [
      {
        text_key: "whatsNext.components",
        name: "vuetifyjs vuetify-loader",
      },
      {
        text_key: "whatsNext.selectLayout",
        name: "vuetifyjs vuetify",
      },
      {
        text_key: "whatsNext.frequentQuestion",
        name: "vuetifyjs awesome-vuetify",
      },
    ],
  };
},

然后，在您的模板中：

<ul>
  <li v-for="item in items" :key="item.text_key">
    {{ $t(item.text_key) }}
  </li>
</ul>

【讨论】：