2019-12-10 vue data中对象添加

问题是以下这种代码

<div class="transition-block" v-if="dialogTransition">
  <div class="transition-line"
       v-for="item in transitionMenuList"
       :key="item.id">
    <p class="transition-label">{{item.menuName}}</p>
    <el-select class="transition-select"
               v-model="transitionDialogData[item.id]"
               multiple
               filterable
               collapse-tags
               style="margin-left: 20px;"
               placeholder="请选择">
      <el-option v-for="select in item.lowerMenu"
                 :key="select.id"
                 :label="select.menuName"
                 :value="select.id">
      </el-option>
    </el-select>
  </div>
</div>

el-select用了v-for来渲染数据，所有数据都会根据接口获取的transitionMenuList来渲染
但是在实现过程中接口成功后用

this.transitionMenuList = res.data.transitionMenuList

这种方式赋值成功后下拉框可以正常渲染，但是点击下拉选项会存在问题，会触发click，也会修改下拉框的v-model，但下拉框视图无更新
后面查找文档后,通过下面代码为接口走成功后，先动态生成data中的obj，然后去为obj赋值

res.data.menuList.forEach(item => {
  _this.$set(_this.transitionDialogData, item.id, [])
  // 编辑状态时需要遍历数组填充vue对象的数据
  for (let i of item.lowerMenu) {
    if (i.isSelect === true) {
      _this.transitionDialogData[item.id].push(i.id)
    }
  }
})
_this.transitionMenuList = res.data.menuList

通过以下两种方法可以将响应属性添加到嵌套的对象上

Vue.set(object, key, value)
this.$set(this.obj,'e',02)