element form表单组件重复错误提示不显示

前言

在我司已经经历了好几个后台项目了，登录页面一直有个小问题，如果登录出错了并且第一次提示了错误，然后再点击同一个按钮，错误提示就消失，而不是重复显示同一个错误。

后来去翻了下element的源码，发现el-form-item的error属性监听的是watch方法，也就是两次重复的错误操作，提示的错误信息一致，就不会触发watch方法。而我的逻辑是这样的，每次点击登录或者发送验证码，都会去重新验证表单，验证通过了才会去发登录或者验证码请求。但是Element表单组件规定一旦表单验证通过就会清除原来的错误提示信息，这样就导致了第二次点击登录或者发送验证码，原来的错误信息被清除了，而两次错误信息又一致没法触发watch方法，所以也不会重新渲染出新的错误信息出来。

感觉说得很啰嗦，不过造成的原因应该还是表达清楚了。

解决的方法

1. 避免form validate和error一起使用，要么自己写if判断做表单为空和输入不合法的字段，使用error提示错误信息。要么就不要使用了form validate就不要使用error

2. 使用vue $nextTick来修复这个问题
   vm.$nextTick可以将回调延迟到下次 DOM更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。
   我们知道错误提示不显示的根本原因是watch方法没有被触发。那如果我每次给错误赋值一个随机值，然后使用vue $nextTick在dom被更新之后将随机值改成我们需要的错误提示不就可以了。

   let self = this
   self.$refs["loginForm"].validate((valid, fields) => {
   if(valid){
     axios.post('/api/login', {email: 'xxx', code: 'xxx'}).then(res => {
       if(res.data.code === 0){
         // 正确的处理逻辑
       }else{
         // 提示错误
         self.errors.code = Math.random()
         self.$nextTick(() => {
           this.errTips.code = "登录失败，" + (res.data.msg ? "，" + res.data.msg : "")
         })
       }
     })
   }else{
     return false
   }
   })

结束

原文请查看 https://andyliwr.github.io/2017/12/25/element_form_validate/