vue 在data 中定义的中文 国际化问题

问题描述: 在data 中定义的中文, 切换成英文语言时, 不会变成英文
问题原因: 因为data 中的数据在初始化时一次性加载, 并不会响应,只能拿到最初的值
解决方法:
比如在data中定义的array 数组, 在html 中渲染

  1. 把array 数组放在computed 计算属性中
computed: {
   mapSex(){
        return [
          {sexKey: "all", sexName: this.$t('system.traffic.txt_10')},
          {sexKey: "man", sexName: this.$t('system.traffic.txt_11')},
          {sexKey: "woman", sexName: this.$t('system.traffic.txt_12')},
        ]
      },
}
  1. 还在data中定义, 但不使用国际化函数$t(), 在html 中使用
data(){
  return {
    mapSex:[
            {sexKey: "all", sexName: 'system.traffic.txt_10'},
            {sexKey: "man", sexName: 'system.traffic.txt_11'},
            {sexKey: "woman", sexName: 'system.traffic.txt_12'},
          ],
   }
}

  {{$t(item.sexName)}}

总结: 第一种方法 也可以, 但data 中若数据很多, 都定义成计算属性,也不现实, 建议使用第二种方案

你可能感兴趣的:(前端)