多端登录切换时两个表单验证报错问题解决方案

做多端登录时,每一种登录方式用一个表单取提交,在切换表单的时候,表单的el-input的校验规则rules会出现如下bug
在这里插入图片描述
在这里插入图片描述
部分代码如下:
在这里插入图片描述
在这里插入图片描述
解决方案:每个表单添加key值即可
在这里插入图片描述
修改后的效果:
在这里插入图片描述
问题本质:即使两个表单绑定的值不同,但是浏览器在解析时,先解析第一个表单,此时表单上是没有绑定ref,之后再解析第二个表单时,浏览器发现这它的prop和第一个表单的prop一样,所以就认为这两个表单是同一个表单,就没有重新渲染,而ref本身是作为渲染结果被创建的,所以第二个表单没能成功绑定ref,验证就无法生效。

猜你喜欢

转载自blog.csdn.net/SmallTeddy/article/details/106541303