V-FOR循环 FORM表单 VALIDATE 验证
代码如下:
<template>
<div class="driverPermit">
<div v-for="(item,index) in datas.realForm" :key="index">
<el-form ref="form" :model="datas" label-width="160px" :rules="rules">
<el-form-item label="名字" :rules="rules.name" :prop="`realForm.${index}.name`">
<el-input v-model="item.name" placeholder="名字"></el-input>
</el-form-item>
<el-form-item label="年龄">
<el-input v-model="item.age" placeholder="年龄"></el-input>
</el-form-item>
<el-form-item>
<el-button @click="submit(index)">保存</el-button>
</el-form-item>
</el-form>
</div>
</div>
</template>
<script>
export default {
data(){
return {
datas:{
realForm:[
{
name:'aaaa',
age:12,
},
{
name:'bbb',
age:11,
},
]
},
rules:{
name:[{required: true, message: '请输入名字', trigger: 'blur' }]
}
}
},
methods:{
submit(index){
this.$refs.form[index].validate((valid)=>{
if(valid){
alert('提交成功')
}
})
}
}
}
</script>
结果如下:
具体说明:
:rules="rules.name"
其中rules.name为定义的自定义规则中的相对应的校验规则指定
:prop="`realForm.${index}.name`"
prop需动态绑定realForm为v-for中in后面循环的变量集合名${index}为v-for中:key对应的变量名,最后为对应的v-model绑定的变量名
总结:
所有规则以及绑定值都需根据v-model中绑定的变量名统一才生效