In usevue element-ui formWhen rendering a form, you will encounter such a data structure:
{
"title":''123455,
"email":'123456@',
"list": [
{
"id": "quis consequat culpa ut pariatur",
"name": "et quis irure dolore ullamco",
"ompany": "sunt mollit",
"address": "anim reprehenderit aliquip labore velit"
},
{
"id": "",
"name": "laborum magna",
"company": "mollit esse ipsum quis",
"address": "cillum dolore ex ut"
},
]
}
When encountering a certain field value such as list is an array, and the following multiple field values need to be checked using rules, directly bind prop="corresponding field value" to the fields below list, which cannot be checked successfully. There are two solutions:
1. Set another one where it is an array<el-form :model="current child object" v-for="traverse list array"></el-form>
Just bind the prop name to the original name for the fields under the list array;
The sample code is as follows:
<el-form :model="item" v-for="(item,index) in :key="index">
<el-form-item label="name" prop="name" :rules="{ required: true, message: 'Required', trigger: 'blur' }">
<el-input placeholder="name" v-model=""></el-input>
</el-form-item>
</el-form>
2. Directly bind the field name of the object under the list array to the name under the array
The sample code is as follows:
<div v-for="(item,index) in :key="index">
<el-form-item label="name" :prop="`list[${index}].name`" :rules="{ required: true, message: 'Required', trigger: 'blur' }">
<el-input placeholder="name" v-model=""></el-input>
</el-form-item>
</div>
Here list is the array in the above object, and datafields is the outermost object.
Summarize
The above is the multi-layer nesting of arrays of vue elementUI form verification functions introduced to you by the editor. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support for my website!
If you think this article is helpful to you, please reprint it. Please indicate the source, thank you!