<el-form :model="list" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
<div v-for="(item,index) in list" :key="index">
<el-form-item label="活动名称" :rules="rules.name" :prop="index +'.name'">
<el-input v-model="item.name"></el-input>
</el-form-item>
</div>
<el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
<el-button @click="resetForm('ruleForm')">重置</el-button>
</el-form>
data() {
return {
list:[
{name:'0'},
{name:'1'},
{name:'2'},
{name:'123'},
],
rules: {
name: [
{ required: true, message: '请输入活动名称', trigger: 'blur' },
],
}
};
},
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert('submit!');
} else {
console.log('error submit!!');
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
}
}
这里的:prop name命必须要跟model一致但是又是动态设置的本身rules是没有存在这个x.name的,虽然解决了问题, 不过目前为止我还没有明白其中的原理是为何
有知道原理的同学可以留言告诉我