如何使用 vue-i18n 翻译渲染项目列表？

Question

我是 vue.js 和 vue-i18n 的新手，想知道如何使用 v-for 翻译呈现的项目列表。

这是一个使用 vue.js 的 CakePHP 项目。我试过在 data 函数中引用语言环境，但这会破坏视图。

JS

new Vue({
  i18n,
  el: '#my-form',
  data: {
    myList: [
      {key: 1, title: 'Option 01'},
      {key: 2, title: 'Option 02'},
      {key: 3, title: 'Option 03'}
    ]
  } 
})  

<div>
  <label>{{ $t('label.options') }}</label>
  <div>
    <button v-for="option in myList">{{ title }}</button>
  </div>
</div>

我需要翻译列出的每个选项并为其他 selects 和 lists 复制。非常感谢任何帮助，因为我不确定如何继续。

Answer 1

将您的 myList 改为计算的 属性，然后您可以通过 title: this.$t(options.1).

使用 i18n 中定义的选项

https://codepen.io/Hiws/pen/xxKRpJR?editors=1011