vue双向绑定爬过的一个坑

          
              
                
                
              
            

编辑时,设 this.postForm = response.data
然后 this.postForm.role_id = response.data.role.id

问题出来了,这个下拉选择无法选择

this.postForm这个vue对象第一次赋值时,Vue 会在初始化实例时对属性执行 getter/setter 转化过程,然后才能双向绑定成功, this.postForm.role_id = response.data.role.id这一步操作,是无法set/get的,绑定不成功,成功的数据应该是这样的

![T@C(MW5Q5316%@L]ET7G3U.png

解决方法是把数据处理好之后再赋给this.postForm

还有另一种方式

Vue 不允许在已经创建的实例上动态添加新的根级响应式属性(root-level reactive property)。然而它可以使用 Vue.set(object, key, value) 方法将响应属性添加到嵌套的对象上:
Vue.set(this.postForm, 'role_id', 2) (没有测试)

你可能感兴趣的:(vue双向绑定爬过的一个坑)