vue v-for：在vue i18n中使用switch进行翻译

如何解决vue v-for：在vue i18n中使用switch进行翻译

我在使用通过“ 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。