如何翻译 Vue i18n 的 v-for data 字符串数组

Question

我是 vuejs 新手，正在使用多语言功能（德语和英语）完成我的项目，但我对循环列表的字符串数据数组有问题，我不知道如何翻译它，在这里\'这就是我的意思

\n

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

\n

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

\n

// de.json\n{\n  "whatsNext": {\n    "components": "Komponenten erforschen",\n    "selectLayout": "Layout w\xc3\xa4hlen",\n    "frequentQuestion": "H\xc3\xa4ufig gestellte Fragen"\n  }\n}\n\n// en.json\n{\n"whatsNext": {\n    "components": "Explore components",\n    "selectLayout": "Select a layout",\n    "frequentQuestion": "Frequently Asked Questions"\n  }\n}\n

\n

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

\n

我尝试了这个，但它不起作用，只能呈现德语，因为语言环境是德语

\n

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

\n

Answer 1

在 v9.x 中，您可以使用 $tm('YOUR FIELD') 访问数组

如此处记录的： https: //vue-i18n.intlify.dev/api/composition.html#tm-key并在此讨论：https://github.com/kazupon/vue-i18n/issues/91#issuecomment-1070794621

您需要对 tm 返回的区域设置消息使用 rt

<div class="container">
  <template v-for="content in tm('contents')">
    <h2>{{ rt(content.title) }}</h2>
    <p v-for="paragraph in content.paragraphs">
        {{ rt(paragraph) }}
    </p>
  </template>
</div>