00:00:00
i18n切换值无效
之前有项目要做中英文切换,于是我选择了使用==vue-i18n==插件来进行完成需求,在开发过程中遇到一个问题记录一下
当将需要切换的文字内容以 ==this.$t('xxx.xxx')== 的方式放入 data 中时发现默认的语言是可以显示出来,但是当我们进行切换语言时,data 里的数据在循环中却不会切换
js:
data() {
return {
test:[
{a:this.$t('user.test')},
{a:this.$t('user.test2')},
{a:this.$t('user.test3')}
]
}
}template 中调用
<li v-for="i in test" :key="i">{{ i.a }}</li>这时我们发现显示是可以显示的,但是改变 this.$i18n.locale 的值却无法切换语言,查了资料,发现说官网推荐把这样的数据放在 computed 计算属性中,但总感觉这样有点麻烦,转换一下思路,这里推荐另一种方法:
js:
data() {
return {
test:[
{a:'user.test'},
{a:'user.test2'},
{a:'user.test3'}
]
}
}template 中调用:
<li v-for="i in test" :key="i">{{ $t(i.a) }}</li>这样就解决了,亲测有效