解决Vue+Element UI使用表单rules国际化时From表单验证信息不能实时更新

说明：该篇博客是博主一字一码编写的，实属不易，请尊重原创，谢谢大家！

问题描述

在默认中文时，点击登录或者失去输入框焦点时测试时，表单验证消息没有问题如图1，此时如果切换到英文时就会出现验证信息还是中文的情况如图2所示

点击注册按钮切换注册表单，此时会重置表单数据，所以不会出现验证提示信息与语言不符情况

解决方法

方法1

使用computed计算属性监控自己定义的变量

computed: {
    loginRules() { // :rules="loginRules"
      return {
        username: [
          { required: true, message: this.$t('login.errUserNameMsg'), trigger: 'blur' }
        ],
        password: [
          { required: true, message: this.$t('login.errPasswordMsg'), trigger: 'blur' }
        ]
      }
    }
  }

方法2

通过watch监听切换中英文时，重置表单验证，这个是博主比较喜欢的，其实不需要保留上一次语言产生的验证提示，直接重置这样看着比较舒服干净，也不存在语言与提示信息不符的情况

watch: {
  // 监听切换中英文时，重置表单验证
  '$i18n.locale': function() {
    this.$refs['loginForm'].clearValidate()
  }
}

最终效果