使用vue框架，数据回显之后，输入框不能编辑的问题

现象：

在编辑的数据回显操作中，把数据回显完之后，发现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