写在 data 初始化的时候拿到这些被国际化的值,并不能响应变化。

官方的解决办法是,建议我们将表达式写到computed属性里,不要写到data中使用

<div>{{$t('k.state')}}</div> // 可以动态改变

data() {
    return {
        dyh: this.$t('k.state') //只能拿到初始化时的多语言,不能动态改变
    }
}

computed: {
	// 导航多语言 可以动态改变 ----官方推荐
	sideBarList(){
	  return [
		{
		  "icon": "eth",
		  "name": this.$t("Common.name"),
		  "path": "/index"
		}
	  ]
	}
},

使用监听方式也可以实现 

<template>
  <div>
    <div class="solutions">{{ solutions }}</div>
  </div>
</template>
 
<script>
export default {
  watch: {
    '$store.state.lang'(language) {
      this.init()
    }
  },
  data() {
    return {
      solutions : this.$t('solutions')
    }
  },
  created() {
    this.init()
  },
  methods: {
    init(){
      this.solutions = this.$t('solutions')
    }
  },
}
</script>

Logo

前往低代码交流专区

更多推荐