Element UI 的 autocomplete 组件选择后导致表单校验不通过如何解决？

Question

在表单中使用了autocomplete来实现输入和选择功能，但是当我选择选项时，会导致表单校验失败，即使输入框中有文字，依旧会校验失败，想问下该如何解决
组件代码：

<el-form-item label="用户名" prop="userName">
        <el-autocomplete
            class="userNameInput"
            v-model="selectUserInfo"
            :fetch-suggestions="querySearch"
            placeholder="选择或输入用户名"
            @select="selectOption"
            @blur="onBlur"
        ></el-autocomplete>
      </el-form-item>

规则代码：

rules: {
        userName: [{required: true, message: '请输入用户名', trigger: 'blur'}],
        password: [{required: true, message: '请输入密码', trigger: 'blur'}]
      },

函数：

selectOption(params) {
      console.log(this.selectUserInfo)
      this.loginForm.userName = params.userName
      this.loginForm.password = atob(params.password)
    },
    onBlur() {
      console.log('blur')
      console.log(this.loginForm.userName, this.selectUserInfo)
      this.loginForm.userName = this.selectUserInfo
    },

我希望选择后不会触发表单校验失败

Answer 1

如果是最后提交的时候，没有办法通过校验。那么检查一下 loginForm.username 是否还是响应式属性。你这样的赋值操作可能会丢失响应式 this.loginForm.userName = params.userName

如果是用户填写时和填写后没有正确的改变 <form-item> 的校验状态，那么检查属性是否被监听之外还需要检查触发的事件类型是否正确。 blur、input、change 对应的是不同的事件， 下拉选择器不一定会有抛出 blur 事件。

为什么v-model绑定的对象属性不是总是响应式？