vue使用element表单写了props却不触发验证

<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就好

©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容