表单深度校验问题解决

表单深度校验不生效问题解决

原代码

html部分

<el-form :model="formData" :rules="formRule" ref="formData">
	<el-row v-for="(item, index) in formData['list']">
        <el-form-item label="字段名称:" :prop="`field`">
            <el-input v-model="formData['list'][index].field" placeholder="请输入添加的字段名称"></el-input>
        </el-form-item>
    </el-row>
</el-form>

script部分

data(){
	formData: {
		list: [
			{field: 1},
			{field: 2}
		]
	},
	formRule: {
		field: [
			{required: true, trigger: 'blur'}
		]
	}
}

按照原来的方法，校验并没有生效

修改：

<el-form :model="formData" :rules="formRule" ref="formData">
	<el-row v-for="(item, index) in formData['list']">
        <el-form-item label="字段名称:" :prop="`list[${index}].field`" :rules="formRule.field">
            <el-input v-model="formData['list'][index].field" placeholder="请输入添加的字段名称"></el-input>
        </el-form-item>
    </el-row>
</el-form>

prop修改，并且form-item也绑定到具体的rule