前端实战项目积累小知识（13）：（vue+element）解决两个表单通过if判断切换 表单验证发生冲突的问题

（vue+element）解决两个表单通过if判断切换 表单验证发生冲突的问题

需求：根据不同的类型进行form切换，以及要实现表单校验

失败尝试：再每个不一样的form里每个子元素加了key不行（错误示范）

可能造成的原因：即使两个表单绑定的值不同，但是浏览器在解析时，先解析第一个表单，此时表单上是有绑定ref，之后再解析第二个表单时，浏览器发现这它的prop和第一个表单的prop一样，所以就认为这两个表单是同一个表单，就没有重新渲染，而ref本身是作为渲染结果被创建的，所以第二个表单没能成功绑定ref，验证就无法生效。 具体代码如下：

这样就完满解决了我的困惑，但是不知道是否有更好的办法，如果有希望大家能告知。