記一個vue 在el-table內嵌套el-select 無法點擊選擇的BUG解決辦法

代碼片段如下 正常情況下 我以爲 壓根不需要什麼@change事件 按道理他自然就能修改表格下 行內的單元格數據
然而想法太美好了,浪費了我2個小時 期間找了N多辦法沒解決
如change內調用$forceUpdate $set之類的

BUG現象是這樣的: el-select 怎麼點擊都無反應 但初始值是正常的 F12插件查看 父組件 el-table的屬性 顯示結果已經改變了 change事件也正常傳遞了改變後的值,僅僅是el-select自己顯示有問題
查看el-select的value 沒變化

所以問題是所有人都變了 就他自己反而沒變,猜測el-select的value變化並不由自己控制 而是主動傳遞事件改變v-model綁定的屬性 再監聽其屬性改變 進而改變自己 現在監聽失效了

 <el-table :data="result.gobalActions">
        <el-table-column label="事件">
          <template slot-scope="scope">
            <el-select
              :key="scope.$index"
              v-model="scope.row.events"
              multiple
              placeholder="請選擇"
              @change="handleEvents"
            >
              <el-option
                v-for="(item,index) in source.event.gobalActionTypes"
                :key="index"
                :value="item.value"
                :label="item.label"
              />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column
          label="動作"
          prop="name"
        />
      </el-table>

最終 牽扯到了 el-select的 實現原理 wacth 對於 初始未在data內定義的屬性可能監聽失效
而我們el-select嵌套在 table內 其v-model綁定的屬性 肯定是不可能一開始就聲明的
我們只聲明到了 result.gobalActions 這一級 而v-model綁定的是 result.gobalActions[index].events
猜測 改變result.gobalActions 會使wacth生效

實現handleEvents 方法

handleEvents(values) {
      this.result.gobalActions.push({ events: [], name: '' })
      this.result.gobalActions.splice(this.result.gobalActions.length - 1, 1)
      // this.$forceUpdate()
    }

結果 TMD 果然生效了!!!
所以解決辦法就是 更新 data內有聲明的那一級的屬性讓watch能順利拿到新數據

感覺這解決辦法非常的奇怪 但反正生效了,至於 // this.$forceUpdate() 爲什麼沒效果 實在費解