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

【问题标题】：vue v-for: translate with switch in vue i18nvue v-for：在 vue i18n 中使用 switch 进行翻译
【发布时间】：2020-12-20 02:29:43
【问题描述】：

我用vue i18n翻译信息时遇到问题，通过“v-for”调用，模板中的所有数据都翻译没有问题，但我通过数组和脚本导出的数据不渲染

我正在使用 vue-i18n：版本 7.8.1

【问题讨论】：

能否请您展示您所看到的并解释您希望看到的内容？另外，你用的是什么版本的 vue-i18n？
嗨菲尔，添加图片和 vue-i18n 版本的问题我希望你能帮助我，谢谢

标签： vue.js vue-i18n

【解决方案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。

【讨论】：

真的，非常感谢，我试图翻译的部分完美无缺，但是当我更改模板中的代码时，问题和信息不显示，键是正确的，它可能是一个小的编程错误，真的非常感谢
我昨天检查了，但是我仍然无法将字符串发送到组件，我尝试了你给我看的两种方式，但它们没有显示在应用程序中，对不起我是 vuejs 的新手。