欢迎光临
我的个人博客网站

el表单验证的坑

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

v-for问题

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

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

v-if问题

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

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏