需求场景
前端框架是vue.js,并且需要用后端返回的数据内的某个字段值去渲染初始值,如输入框的默认值或者是多选框是否要默认勾选等等,最后还需要将页面设置的值传回给后端
示例
如在data中定义了一个:
checkBoxList:[],然后我请求完成后,赋值给checkBoxList,假如checkBoxList的结构如下:
checkBoxList: [
{
name: 'xxxx',
value: true
},
{
name: 'xxxx',
value: false
},
{
name: 'xxxx',
value: true
}
];
这里后端返回value值一般是字符串,自行转换成布尔值(以确保多选框的checked值是布尔值)
这里用elementui框架去写html结构:
<el-form>
<el-form-item>
<el-checkbox :label="item.name" name="xxx" v-for="(item,index) in checkBoxList" :key="index" :checked="item.value" v-model="item.value"></el-checkbox>
</el-form-item>
</el-form>
同理,输入框也是一样的,用v-model去绑定到输入框上就可以了,最后再经过一系列处理,再次将这个checkBoxList传回去给后端就好了