vue v-for:在 vue i18n 中使用 switch 进行翻译
vue v-for: translate with switch in vue i18n
我在使用通过“v-for”调用的 vue i18n 翻译信息时遇到问题,模板中的所有数据都可以毫无问题地翻译,但我通过数组和脚本导出的数据不会呈现
我正在使用 vue-i18n:版本 7.8.1
您只能在创建组件时设置 helpTitles
属性。
我建议在模板中使用 $t()
而不是 data()
。然后它会自动响应变化。
老实说,我不认为使用翻译文件中的数组是个好主意。我更倾向于用他们自己的键添加它们,就像你的问题和信息翻译键一样,例如
helpStartedTitle: "GETTING STARTED - MODEL",
helpMembersTitle: "MEMBERS",
helpAccountTitle: "ACCOUNT",
//etc
然后您可以像这样在数据中设置键
data: () => {
const keys = [
"helpStarted",
"helpMembers",
"helpAccount",
"helpPayment",
"helpSocial",
"helpFraud",
"helpSupport",
"helpStudio"
]
return {
helpInfo: keys.map((key, id) => ({
id,
title: `general.help.${key}Title`,
question: `general.help.${key}`,
answer: `general.help.${key}Info`
}))
}
}
然后在您的模板中
<div v-for="help in helpInfo" :key="help.id">
<div :id="help.id" class="help-subtitle">{{ $t(help.title) }}:</div>
<HelpItem
:question="$t(help.question)"
:answer="$t(help.answer)"
:num="help.id"
/>
</div>
更好的方法是将翻译键传递给您的 HelpItem
组件并使用 $t()
。
<HelpItem
:question="help.question"
:answer="help.answer"
:num="help.id"
/>
并在 HelpItem
组件中
export default {
name: "HelpItem",
props: {
question: String,
answer: String,
num: Number
},
// etc
}
<!-- just guessing here -->
<h1>{{ $t(question) }}</h1>
<p>{{ $t(answer) }}</p>
仅供参考,我已将整个 answear
更正为 answer
。
我在使用通过“v-for”调用的 vue i18n 翻译信息时遇到问题,模板中的所有数据都可以毫无问题地翻译,但我通过数组和脚本导出的数据不会呈现
我正在使用 vue-i18n:版本 7.8.1
您只能在创建组件时设置 helpTitles
属性。
我建议在模板中使用 $t()
而不是 data()
。然后它会自动响应变化。
老实说,我不认为使用翻译文件中的数组是个好主意。我更倾向于用他们自己的键添加它们,就像你的问题和信息翻译键一样,例如
helpStartedTitle: "GETTING STARTED - MODEL",
helpMembersTitle: "MEMBERS",
helpAccountTitle: "ACCOUNT",
//etc
然后您可以像这样在数据中设置键
data: () => {
const keys = [
"helpStarted",
"helpMembers",
"helpAccount",
"helpPayment",
"helpSocial",
"helpFraud",
"helpSupport",
"helpStudio"
]
return {
helpInfo: keys.map((key, id) => ({
id,
title: `general.help.${key}Title`,
question: `general.help.${key}`,
answer: `general.help.${key}Info`
}))
}
}
然后在您的模板中
<div v-for="help in helpInfo" :key="help.id">
<div :id="help.id" class="help-subtitle">{{ $t(help.title) }}:</div>
<HelpItem
:question="$t(help.question)"
:answer="$t(help.answer)"
:num="help.id"
/>
</div>
更好的方法是将翻译键传递给您的 HelpItem
组件并使用 $t()
。
<HelpItem
:question="help.question"
:answer="help.answer"
:num="help.id"
/>
并在 HelpItem
组件中
export default {
name: "HelpItem",
props: {
question: String,
answer: String,
num: Number
},
// etc
}
<!-- just guessing here -->
<h1>{{ $t(question) }}</h1>
<p>{{ $t(answer) }}</p>
仅供参考,我已将整个 answear
更正为 answer
。