解决vue国际化this.$i18n.locale设置值切换对data中的值循环使用无效

之前有项目要做中英文切换,于是我选择了使用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>

这样就解决了,亲测有效


版权声明:本文为weixin_51281841原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。