Vue form表单中 Rules验证 填入值或选择值后 必填消息没有清空的解决

自定义rules验证 然后watch监听form表单变化 然后使用this.$refs.form.clearValidate()重新验证

代码如下

<el-form-item label="分类图标" prop="picArr" ref="image">

                <MaterialList v-model="picArr" type="image" :num="1" :width="150" :height="150" />

            </el-form-item>

 

picArr: [{

                    required: true,

                    trigger: 'change',

                    validator: validatePass

                    // message: '请选择分类图标',

                }],

 

var validatePass = (rule, value, callback) => {

            console.log(value)

            if (this.picArr === '' || this.form.pic == '') {

                callback(new Error('请选择分类图标'));

            } else if (value != '') {

                callback();

            }

        };

 

 watch: {

        picArr: function (val) {

            if (val.length > 0) {

                this.$refs.form.clearValidate()//清除所有验证

               this.$refs['prop绑定的值'].clearValidate()//清除单个验证

            }        

    },