iview,element中,多个表单验证报错的解决办法_多个表单重用会验证失败

最近遇到了一个表单验证的坑,搞了很久才解决这个问题,这里记录一下

iview,element这两个ui框架,表单验证都是通过async-validator来实现的
给最外层设置一个ref,提交的时候用

this.$refs[ref].validate(valid => {
        if (valid) {
          this.$Message.success("Success!");
        } else {
          this.$Message.error("Fail!");
        }
      });
1
2
3
4
5
6
7

用validate这个function来做验证,这个validate是他们根据validator里的方法封装的,可以直接使用,然后根据结果写业务代码.
我的项目中,<form>表单是在一个<li>标签里面,用v-for渲染出来的表单,有很多个,
于是我动态绑定了ref,
但是在测试的时候遇到了奇怪的错误,点击提交按钮,报错
Error in event handler for "click": "TypeError: this.$refs[("formValidate" + name)].validate is not a function"

经过排查发现,单个的form表单是不会出现这种错误的,只有v-for循环出来的多个表单会出现这个错误.
在网上查了很久都找不到解决办法,于是自己排查
为什么同样的代码,放在外面就能正常使用,放在v-for循环里面就不能正常使用,于是在控制台对两边代码里面的
this.$refs[name]
this.$refs[name].validate
这两个东西进行对比
正常使用的代码,打印出来this.$refs[name]是一个VueComponent,validate是一个function,

重点来了!

v-for循环的表单,发现this.$refs[name]这个参数是一个数组!,而validate则为undefined
难怪报错了,因为根本找不到validate这个方法,
点击打开这个数组,发现它有一个元素,真的是坑死人

于是把代码改成了
this.$refs['formValidate'+name][0].validate
控制台终于不报错了,总算解决了这个问题,看来开发的时候还是要善于使用debugger跟console,不要轻易地去搜索引擎寻求答案