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

Question

我是vue.js&的新手，vue-i18n想知道如何用v-for.

这是针对使用vue.js. 我尝试在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。非常感谢任何帮助，因为我不确定如何继续。

标签： javascriptvue.jsvue-i18n

Answer 1

myList改为使用计算属性，您可以使用 i18n 中定义的选项title: this.$t(options.1)。

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