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')},
        ]
      },
}

2. 还在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 中若数据很多， 都定义成计算属性，也不现实， 建议使用第二种方案**

同理： element-ui form 表单 的校验规则 也可以放入computed 中

condFormRules(){   // 在form 中绑定的:rules="condFormRules"
      var validateBudget=(rule, value, callback) => {
        if(!value || !Number(value)){
          callback(new Error(this.$t('system.traffic.msg_4')));
        }
        else if(!isNumDecimal(value)){
          callback(new Error(this.$t('system.traffic.msg_5')));
        }
        else{
          callback();
        }
      };
    
      let  rules = {
        name:[
          { required: true, message: this.$t('system.traffic.msg_2'), trigger: ['blur','change']},
        ],
       
        budget:[
          {required: true, validator: validateBudget, trigger: 'blur'},
        ],
      }
      return rules //记得要return 哦
        
    },