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要写在当前验证的那个<el-form-item>内,否则无法生效


最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容