如何翻译 Vue i18n of v-for data Array of String
How to Translate Vue i18n of v-for data Array of String
我是 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",
},
],
};
},
我不会翻译 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>
我是 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",
},
],
};
},
我不会翻译 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>