Element UI 使用表单校验，正确输入后，仍然有提示信息

问题重现

vue 版本: 2.6
element-ui版本: 2.14.1
今天使用elementUI 进行表单校验，主要通过:rules属性设置限制条件，在el-from-item上设置prop属性，进行校验，具体语法请参考element-ui 表单校验。

部分代码

// 表单
<el-form :model="loginForm" :rules="loginRules" ref="loginForm">
          <el-form-item prop="userName">
            <el-input v-model="loginForm.userName" placeholder="帐户" prefix-icon="el-icon-user-solid" auto-complete="off" ></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input v-model="loginForm.password" type="password" placeholder="密码" prefix-icon="el-icon-lock" auto-complete="off"></el-input>
          </el-form-item>
</el-form>
// 校验
loginRules: {
        userName: [
          { required: true, message: '帐号不能为空', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '密码不能为空', trigger: 'blur' }
        ],
}

主要原因，el-form 绑定对象使用的是v-model，而不是:model。

• v-model 表示value属性。 自定义组件的 v-model
• :model表示子组件有个prop叫model。

解决方案

1. prop的属性名称应与input输入框绑定属性名称一致
2. el-form 绑定对象请使用 :model

补充

找bug，千万别上头。上头容易忽略细节，影响心境。建议先处理其他事情或者刷刷某视频，听听音乐，平心静气。