vue使用rules 国际化时 form表单验证信息不能及时更新

实例问题 比如打开新建页面时 为英文


image.png

此时出去 切换成中文后 表单验证信息为改变为中文


image.png

这其实是变量数据未能再次绑定上 解决方法 放到computed 计算属性里面
这里rules 对应form中 :rules=“rules ” 的对象 里面的参数 对应form中 每个单元的prop属性


image.png
computed:{
      rules(){
          return{
            address:[
              { required:true, message: this.$t('location.validate.address'), trigger:'blur'}
            ],
            lat:[
              { required:true, message: this.$t('location.validate.lat'), trigger:'blur'},
              {
                pattern: /^[\-\+]?((0|([1-8]\d?))(\.\d{1,6})?|90(\.0{1,6})?)$/, 
                message: this.$t('location.validate.latfmt')
              }
            ],
            lng:[
              { required:true, message: this.$t('location.validate.lng'), trigger:'blur'},
              {
                pattern: /^[\-\+]?(0(\.\d{1,6})?|([1-9](\d)?)(\.\d{1,6})?|1[0-7]\d{1}(\.\d{1,6})?|180\.0{1,6})$/, 
                message: this.$t('location.validate.lngfmt') 
              }
            ],
            regionname:[
              { required:true, message: this.$t('location.validate.regionname') , trigger:'blur'},
            ]
          }
      }
    },

到此解决


image.png

当然 你若是写的行内告警规则 如:


image.png

则是自动双向绑定的

你可能感兴趣的:(vue使用rules 国际化时 form表单验证信息不能及时更新)