form 表单 input select 输入框接口返回数据不能编辑

在使用element  ui form 表单组件时候，input 输入框能够绑定数据 但是不能修改编辑、如下图所示：

问题：既然能够绑定为什么不能修改呢？

这个可以肯定的一点是数据单项赋值是生效了。双向绑定没有生效。所以我们入手就应该从Vue数据绑定的原理来解决问题。

那么Vue双向绑定的原理是什么？

Vue的双向绑定原理是通过数据劫持结合发布者-订阅者模式来实现的。

数据劫持：Vue组件初始化时，对 data 中的 item 进行递归遍历，会通过Object.defineProperty()方法来劫持对象的属性，这个方法可以对一个对象的属性进行定义或修改，包括定义getter和setter。这样，当这些被劫持的属性被读取或赋值时，就会触发相应的getter或setter函数

所以这个要搞清楚一点就是对data对象数据初始化的时候进行遍历劫持。然而细心的同学就会发现。我这里Data数据对象是通过方法。修改过的。那么对于Vue来说。接没有初始化过这个数据，也就没有办法劫持

所以就需要手动来添加劫持方法。 让这个对象保持响应式。对于Vue熟练一点的朋友就知道要使用this.$set(对象，属性名，值)来并确保这个新属性同样是响应式的，且触发视图更新。

最后结果

重点：什么情况容易出现这种情况呢？

1：Data数据式对象中对象 比如：

data(){
    return{
       dataform:{ 
            dataformson:{ 
                son1:'',
                son2:''
                } 
            } 
    }
}

2:  Data数据中对象通过方法来添加属性。比如：

data(){
    return{
        dataform:{
            son1: '',
            son2:''
        }    
    }
}
methods:{
//添加属性
  addSonFun(){
        this.dataform['son3']=''
    }
}