element中实现v-for循环出来的表单验证

当我们的数据是v-for循环出来的,要想表单验证生效,可就没那么简单了,下面一起来看看实现方式吧!

常见报错:please transfer a valid prop path to form item

1.普通的表单验证

一般情况下,只要我们的prop里面的值和v-model中的值一一对应,表单验证变会生效,如下例子所示:

2.循环出来的input框进行表单验证

但是有时候会出现表单中的input框是动态增加或删除的,这时候该怎么实现表单验证呢?

A.修改prop值

主要是prop值,prop中的第一个值要为遍历数据中的other,中间拼接索引,然后拼接v-model中的值,如下例子所示:

:prop=" 'other.' + index + '.otherCharges'    注意这个小数点一定不能楼掉,漏掉就会报如下的错

please transfer a valid prop path to form item

B.单独为当前数据添加表单验证

还有要注意的就是表单验证的rules要写在当前验证的那个内,否则无法生效


你可能感兴趣的:(element中实现v-for循环出来的表单验证)