当前位置: 首页 > Web前端 > vue.js

elementui初学者手上,v-for循环产生表单坑

时间:2023-04-01 10:41:43 vue.js

在使用elementui开发表单的时候,遇到了这样一个问题。目标需求是点击一个添加按钮生成一个新的表单,同时对表单填写的字段进行验证并显示提示信息。然后在做的过程中,按照elementui的代码添加基本方法后,报错为this.$refs[formName].validateisnotafunction。这里需要循环生成的form的prop是一个变量,但是一开始是没有的。要实现他的“改变”,同时,验证规则也必须和每一个表单一一对应。每次生成一个表单,都要对应一组校验规则,所以需要给每个表单添加校验规则。而不是只有一套。更好的方案是在form内部(looped元素外)加一层div,循环生成这部分div。需要注意的是,需要在每个周期的item中加入规则验证。主要代码示例:

......提交submitForm(formName){console.log(this.$refs[formName]);//查看操作前获取的formName,确认无误后继续后续操作this.$refs[formName].validate((valid)=>{if(valid){alert('submit!');}else{console.log('errorsubmit!!');returnfalse;}});},