经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » HTML/CSS » CSS » 查看文章
el表单验证的坑
来源:cnblogs  作者:bugSource  时间:2021/3/29 8:56:04  对本文有异议

记录element组件el-form使用v-for和v-if时,验证数据时报错的处理。

v-for问题

使用v-for时导致表单验证出现this.$refs[formName].validate is not a function

  1. // $refs[formName]后面加多一个[0]
  2. this.$refs[formName][0].validate((valid) => {})

v-if问题

  • 问题:通过v-if控制两个表单显示或隐藏的过程中,会出现验证失效、验证冲突、样式出错等情况。
  • 解决:给两个表单分别加key值。
  • 原因:即使两个表单绑定的值不同,但是浏览器在解析时,先解析第一个表单,此时表单上是没有绑定ref,之后再解析第二个表单时,浏览器发现这它的prop和第一个表单的prop一样,所以就认为这两个表单是同一个表单,就没有重新渲染,而ref本身是作为渲染结果被创建的,所以第二个表单没能成功绑定ref,验证就无法生效。

原文链接:http://www.cnblogs.com/bugSource/p/14581605.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号