如何使用 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