element表单校验不生效问题

element表单校验不生效问题

根据我所遇到的问题情况，主要分两种，请遇到相同情况的同学，自己对号入座一波！！

1.第一种是直接没反应，直接就不触发错误提示类。

这种一般就是数据绑定的名称没有对应，以下是需要对应的位置，请自行参照。

html

js 中data

第二种就是名称都对应上了，也修改了绑定的值，但是错误提示就是不消失问题。

就类似如如下这种情况：

如图所示我的图片已经显示成功了，但是错误提示还是没有消失，但是在保存校验的时候是没有问题的，所以初步判断为，表单校验方法没有触发。

所以我定义了自定义校验方法，并进行了打印，当改变所绑定的值的时候，理因触发自定义方法，但是现实是没有触发。

经过很久的实验 ，我终于get到了问题所在。

<el-form-item label="封面图" prop="logo">
            <!-- 通过v-model绑定不然值改变不触发校验 -->
            <!-- <el-input v-show="false" type="text" v-model="ruleForm.logo" name="" id=""></el-input> -->
            <el-upload
              class="avatar-uploader"
              action="http://www.51sjk.com/Upload/Articles/1/0/259/259950_20210701002745597.jpg"
              :show-file-list="false"
              :auto-upload="false"
              :on-change="imgchange"
            >
              <img v-if="ruleForm.logo" :src="ruleForm.logo" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              <div slot="tip" class="el-upload__tip">上传16:9比例的视频封面图</div>
            </el-upload>
          </el-form-item>

如上方代码所示，必须通过v-model绑定你改变的值才行，直接赋值不会触发表单校验，当然必须得用element得输入框组件绑定才行哦，用原生的input输入框绑定也是不行的哦！