vue使用Element组件时v

vue使用Element组件时v

标题描述看起来有些复杂，有vue，Element，又有表单验证，还有v-for循环？是不是有点乱？不过我相信开发中遇到过此问题的同学，一看就明白我说的意思了。

首先Element组件有一套完善的表单验证方法，官方文档写的也很清楚：Element表单验证API，正常按照官方文档添加rules规则，需要验证的表单项设置prop，然后提交表单时通过form的validate方法验证表单项就可以了。

然鹅问题来了，如果表单项里有通过v-for动态生成的表单项，如何设置验证呢？这个官方文档并没有明确的说法，我们通过查找解决方案和实际验证，总结出来解决方法如下。

首先是循环表单项没有加验证之前的代码：

上线

下线

取消

提交

首先是添加rules规则，这个和正常添加规则一样：

productGroupRules: {

productGroupNum: [{required: DwcAykLntrue, message: '请填写商品数量', trigger: 'blur'}],

productGroupPrice: [{required: true, message: '请填写优惠价格', trigger: 'blur'}]

}

然后给表单项添加验证，以商品数量为例：

注意这里:rules是每个表单项都要添加，有多个的话用productGroupRules.productGroupNum这样的形式区分，对应上面productGDwcAykLnroupRules里的内容。

另外主要就是:prop了，注意正常验证表单项是prop，而这里是:prop。

:prop="'productGroup.'+index+'.num'"是拼接的形式，前面是v-for绑定的数组，中间是数组索引index，最后是表单项绑定的v-model的名称，然后用点.把它们连接起来。这三项都必须保证正确，错一个都无法验证。

另外就是要注意，v-for绑定的数组也必须绑定在form对象里，注意上面的data里：

form: {

activityName: '',

status: '1',

productGroup: [{num:"",price:""}]

}

如果是：

form: {

activityName: '',

status: '1'

},

productGroup: [{num:"",price:""}]

是无法验证的，这一点也要注意。

好了，以上就是解决vue使用Element组件时v-for循环里的表单项验证的解决方案了，希望能帮助到遇到此问题的同学。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。