<el-form :model="formData" :rules="rules" ref="form" label-width="100px">
<el-form-item v-if="flag" key="notRequired" prop="name">
<el-input v-model="form.name" lable="姓名"></el-input>
</el-form-item>
</el-form>
data() {
return {
form:{
name: '',
},
rules: {
name: [{ required:true, message: '请输入姓名', trigger: 'blur' }]
},
}
}
情景再现:
form表单验证的时候,明明写了prop属性并且rules规则中有写校验,但是点击提交表单的时候,并没有校验
解决办法:
出现这种问题的原因是因为vue会有dom节点复用问题,使用v-if的时候加一个唯一的key就好