vue双向绑定爬过的一个坑

          <el-form-item label="权限标签">
              <el-select v-model="postForm.role_id" placeholder="请选择">
                <el-option
                  v-for="item in roleLabel"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>

编辑时，设 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) (没有测试)