2021.10.27 element的表单使用自定义组件时，校验监测不到value改变

本文链接：https://blog.csdn.net/qq_43080484/article/details/120993064

遇到个bug：

表单上传文件后，明明已经有内容了，字段提示校验还存在。

rule = [{ required: true, message: `请上传${item.title}`, trigger: 'change' }]

在这里插入图片描述

解决过程：

以为是校验方法有问题，自己写了个针对附件上传的校验：

const validatePass = (rule, value, callback) => {
   if (value.length) {
     return callback();
   } else {
     return callback(new Error(`请上传${item.title}`));
   }
}
rule = [{ validator: validatePass, trigger: 'change', type: 'array' }]

发现问题出在这个上传组件不是element自带的输入组件，而是自己封装的，校验监听不到value的变化。
组件双向绑定值为data中定义的一个变量（子组件通过$emit更新表单内容）

所以需要我们监听value的变化，并在适当的时机手动重新触发校验。

给form-item挂上ref为cat，用了el.form.change试探性触发，发现不太行，甚至报错。

this. $r e f s . r u l e F o r m .$ emit(‘el.form.change’)

最后：

由于项目需求较复杂，表单双向绑定的数据并不是固定的值，不方便罗列在watch对象中进行监听。我们这里直接在接收子组件的更新事件时进行数据判断和触发。

            <upload v-else-if="item.type === 'attach'"
                    v-model="ruleForm[item.code]"
                    @input="val => {
                      ruleForm[item.code] = val;
                      if (val.length) {
                        $refs.ruleForm.validate()  // 关键在这里
                      }
                    }"/>

舒坦了
在这里插入图片描述