页面中的表单常常会有校验某些字段的须要,惯例的写法是prop和表单的字段名统一即可,然而表单的数据格式可能会很简单,如果 某个字段有多级嵌套,那咱们该如何正确的写prop呢,上面的三种状况中,我别离介绍如何设置prop属性能力正确的校验name字段。
惯例写法
这种状况咱们只须要设置prop为name即可
form: {
name: '',
sex: '',
age: ''
}
对象嵌套写法
如果校验的字段是二级属性,那么prop从一级属性user_info开始
form: {
user_info: {
name: '',
sex: '',
age: ''
}
}
数组嵌套写法
如果校验的字段是数据外面的某一项的某个字段,咱们须要从user_info开始,而后跟上数组的索引,最初再加上须要校验的字段
v-for="(info, index) in form.user_info"
:prop="'user_info.' + index + '.name'"
>
form: {
user_info: [
{
name: '',
sex: '',
age: ''
},
{
name: '',
sex: '',
age: ''
}
]
}
总结:el-form-item上的属性prop字段,必须是其父级组件el-form中绑定model字段中的一个间接子属性。比方某个字段咱们能够通过this.form.user_info[0].name获取到,那么咱们就须要设置prop为user_info[0].name,这样就能够增加校验规定了,其余嵌套状况也一样。