Vue表单回显页面不更新，表单赋值不更新，表单失效

需求

点击编辑时，打开一个表单窗口，请求接口拿到数据后赋值给表单，表单直接不能用了

问题场景

逻辑代码如下

  async edit(id){
    let res = await this.$post('/api/edit',{id});
    this.form = res.data;
    this.modalShow=true;
  }

然后页面中输入框输入值，发现form中的对应字段不改变

原因

表单在绑定v-model="form"时，form里面的字段被表单内的各个输入框绑定了；或者是因为<el-form-item label="单据编号:" prop="momnumber">这个prop属性被绑定了；

直接赋值一个对象导致这些内部的绑定丢失了，vue2中的对象的监听只是浅监听，检测不到内部变化，也就无法触发双向绑定。

解决

console.log(this.form);输出一下form，发现输出的对象[[Prototype]]中不包含具体字段的get\set监听方法；

比如表单中有个name字段，如果他被监听了，那一定有个getName和setName之类的方法，这是Vue框架给添加的；

改用对象的for…of去修改回显就可以了；

for(let i of this.form){
    this.form[i]=res.data[i]
}