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

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

我想用德语和英语翻译项目.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

使用v9.x，您可以使用$tm("您的字段"(访问阵列

如本文所述：https://vue-i18n.intlify.dev/api/composition.html#tm-键，并在此处讨论：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>

Answer 2

我不会翻译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>