v-for循环输入框,表单验证无法循环之后只验证第一个输入框

在做一个项目是对输入框做按钮添加功能,后发现因为v-model绑定的值与变单循环的名称不一致,导致无法循环表单验证,经过多次尝试依旧无法进行多个输入框的表单验证,所以做了一个类似于假的表单验证:

//样式:
//HTML:
<el-row>
	<el-col :span="12" style="display: flex;justify-content: flex-end;flex-wrap: wrap;">
          	<el-form-item style="width: 100% " v-for="(item,index) of add" :key="index" label="单号" prop="Numbers"
                        	:rules="rules.Numbers">
								<el-input style="width: 100%" show-word-limit maxlength="8" v-model.trim="item.adds"
@change="tapChange(index)"></el-input>
</el-form-item>
<el-button icon="el-icon-circle-close" @click="DelAdd"></el-button>
<el-button type="primary" plain @click="OnAdd">+</el-button>
</el-col>
<ei-row>

	//数据:
	data() {
	return {
		add: [
			{ adds: '' }
		],
		base: {
			Numbers: '',
		},
		rules: {
			carrierName: [
				{ required: true, message: '请输入单号', trigger: 'blur' }
			],
		}
	}

可以看到循环的是add数组,输入框绑定的是数组内的变量,而表单验证则是Numbers,在尝试了"'add.' + index + '.adds'"这一类所有的方法之后依然不行,就做了一个只对第一个输入框进行表单验证的(类似于假的):

//对输入框添加侦听事件:
tapChange(i) {
	let str = this.add[i].adds
	if ( str == "" ) {
		this.base.Numbers = "";
	} else {
		this.base.Numbers = JSON.stringify(this.add);
	}
},

思路:因为表单验证的是Numbers这个变量里是否为空,那么我就可以做一个侦听事件,实时侦听这个输入框的内容,当这个输入框里面有值时就把这个值从事组里面格式化赋给Numbers,如果没有值值,那么Numbers就会是空的

提示:仅个人想法,如有更好的方式可以交流

posted @ 2022-11-17 14:26  Clown&  阅读(52)  评论(0)    收藏  举报