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就会是空的
提示:仅个人想法,如有更好的方式可以交流

浙公网安备 33010602011771号