现象:
在编辑的数据回显操作中,把数据回显完之后,发现input输入框虽然数据回显了,但是不能进行修改、删除等操作
原因:
对象会递归遍历data中定义的所有变量,所以如果没定义就监听不到变化
原理:Object.defindProperty。
由于 Javascript的限制,vue不能检测数组和对象的变化
解决:
//vue中data选项里的数据
formData: {
activityId: "",
activityName: "",
tm: "",
zt: "",
jjd: "",
zyp: "",
},
//后端返回的数据 res.data
data = {
activityId: "1",
activityName: "气排球比赛",
trafficFacility:{
item1: {name: '一级', total: 1}
item2: {name: '二级', total: 3}
item3: {name: '三级', total: 3}
item4: {name: '四级', total: 3}
}
}
// 你双向绑定的数据有的字段, 你赋值的字段必须也要有(字段名称一样)
let resFormData = { ...res.data };
resFormData.tm = resFormData.trafficFacility.item1.total;
resFormData.zt = resFormData.trafficFacility.item2.total;
resFormData.jjd = resFormData.trafficFacility.item3.total;
resFormData.zyp = resFormData.trafficFacility.item4.total;
this.formData = resFormData