el-form表单校验失效（v-if与v-show导致的问题）

  • 背景：
    项目中有分步多个表单提交 但是表单校验里会出现部分属性校验不生效的问题
    ,如下图所示，“项目路径”、"用户名"字段前已经出现红色星号 表面表单中rules prop对应的字段正确，但是点击下一步并未正常触发校验

在这里插入图片描述
部分表单代码如下，rules 和prop已用红框标识
在这里插入图片描述
在这里插入图片描述
经Google寻找解决方案无果，最后只能去翻翻vue的官方文档，发现了这一行
在这里插入图片描述
尝试在表单中加入key属性，果然成功，那么问题就是出在这里了
因为v-if在两个相同组件且没有key标识唯一性的情况下，会复用已有元素而不是从头开始渲染

开始测试结论
在表单一中添加两个完全一致的输入框
在这里插入图片描述
点击下一步，正常校验
在这里插入图片描述
将信息补完，点击下一步，进入表单2

在这里插入图片描述
再次点击下一步

在这里插入图片描述
可以看到 只有前两个输入框正常校验，原因是表单切换用的v-if控制，但是现在未加key，所以渲染的时候直接复用

版权声明：本文为qq_30678943原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。