关于前端:vue-在data-中定义的中文-国际化问题

37次阅读

共计 734 个字符,预计需要花费 2 分钟才能阅读完成。

问题形容:在 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'},
          ],
   }
}
<el-radio-group v-model="cond.sex">
  <el-radio 
  v-for="(item, index) of mapSex"
  :key="'sex_'+index":label="item.sexKey" 
  >{{$t(item.sexName)}}</el-radio>
</el-radio-group>

总结:第一种办法 也能够,但 data 中若数据很多,都定义成计算属性,也不事实,倡议应用第二种计划

正文完
 0