前端实战项目积累小知识(13):(vue+element)解决两个表单通过if判断切换 表单验证发生冲突的问题
(vue+element)解决两个表单通过if判断切换 表单验证发生冲突的问题
需求:根据不同的类型进行form切换,以及要实现表单校验
失败尝试:再每个不一样的form里每个子元素加了key不行(错误示范)
可能造成的原因:即使两个表单绑定的值不同,但是浏览器在解析时,先解析第一个表单,此时表单上是有绑定ref,之后再解析第二个表单时,浏览器发现这它的prop和第一个表单的prop一样,所以就认为这两个表单是同一个表单,就没有重新渲染,而ref本身是作为渲染结果被创建的,所以第二个表单没能成功绑定ref,验证就无法生效。 具体代码如下:
这样就完满解决了我的困惑,但是不知道是否有更好的办法,如果有希望大家能告知。