如何将v-的Vue i18n转换为字符串的数据数组

Question

我不熟悉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中循环，所以我不知道怎么做，有人能帮忙吗？

我尝试过这样做，但它不起作用，只呈现德语，因为区域设置为德语

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",
        },
      ],
    };
  },

Answer 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>