vue+elementui表单校验(数组嵌套、object对象嵌套)
vue+elementui表单校验时,数组嵌套、object对象嵌套的校验方法。
·
我们在做表单验证时,可能会出现form对象中嵌套数组或对象的情况,这时我们怎么对嵌套的参数做验证呢?下面给出了两种简单的解决方式。
一、表单数组嵌套,例如:
form: {
title: "test",
list: [{
label: 'test1',
value: '111',
},{
label: 'test2',
value: '22',
}]
}
简单的解决办法就是直接绑定list数组下的对象字段名,例如:
<el-form-item v-for="(item, i) in form.list" :key="i" :label="item.label" :prop="`list[${i}].value`" :rules="{ required: true, message: 'Required', trigger: 'blur">
<el-input v-model="item.value"></el-input>
</el-form-item>
二、object对象嵌套,例如:
<el-form-item label="标题" prop="title">
<el-input
v-model="form.title"
maxlength="50"
show-word-limit>
</el-input>
</el-form-item>
<el-form-item label="姓名" prop="data.name">
<el-input
v-model="form.data.name"
maxlength="50"
show-word-limit>
</el-input>
</el-form-item>
<el-form-item label="地址" prop="data.address">
<el-input
v-model="form.data.address"
maxlength="50"
show-word-limit>
</el-input>
</el-form-item>
form: {
title: '',
data: {
name: '',
address: '',
}
}
更多推荐
已为社区贡献4条内容
所有评论(0)