一、vue.js表单字段双向绑定以及必填校验
1.基本数据类型的双向绑定
代码如下(示例):
<el-form-item label="姓名:" prop="username">
<el-input v-model="form.username"></el-input>
</el-form-item>
form: {
username: ''
}
2.数组下的双向绑定(重点)
适用于页面动态添加多条数据
<div v-for="(item, index) in form.arrays" :key="item.id">
<el-form-item label="姓名:" :prop="`arrays[${index}][username]`" :rules="rules.username">
<el-input v-model="item.username"></el-input>
</el-form-item>
</div>
form: {
arrays: [{
id: 1,
username: ''
}, {
id: 2,
username: ''
}]
},
rules: {
username: [{
required: true,
message: "姓名不能为空",
trigger: "blur"
}]
}