[vue]Element ui select組件做聯(lián)動時(shí)，二級select選項(xiàng)不更新問題！

問題描述

聯(lián)動方法：
element ui select在設(shè)置聯(lián)動時(shí)，改變前一個select1的value值，后一個select2的options重請求中新拿。
問題：
現(xiàn)在有一個問題， select1改變后拿到了select2的options，但是select2的選項(xiàng)沒有更新。后面發(fā)現(xiàn)是select2的選項(xiàng)總是延遲更新一步。
舉例：

第一步：比如select1改變后，拿到的數(shù)據(jù)是：data1

此時(shí)select2選項(xiàng)時(shí)空的；

第二步：select1又一次改變值，拿到的數(shù)據(jù)是data2：

此時(shí)select2有了選項(xiàng)，但是是data1的選項(xiàng)數(shù)據(jù)

第三步...

請問有什么解決辦法嗎？

代碼

// select代碼
<el-select filterable v-model="newList[item.key]" placeholder="請選擇" class="in" v-if="addItemType[index] === 'select'" @change="selChange(item.key)">
  <el-option v-for="ops in dialogItemOps[item.key]" :key="ops.value" :label="ops.label" :value="ops.value">
  </el-option>
</el-select>

// change事件響應(yīng)函數(shù)
selChange: function(key) {
  // 如果改動的是SysID 則需要聯(lián)動獲取分片的options
  if (key === 'SysID') {
    getSplitOptions(this.newList.SysID).then(response => {
      console.log(response)
      this.dialogItemOps.SplitID = response
    })
  }
}

補(bǔ)充：

select都是v-for循環(huán)生成，格式一致，聯(lián)動功能的實(shí)現(xiàn)是在selChange函數(shù)中 --- 修改dialogItemOps.SplitID的值

請求的數(shù)據(jù)打印后，我才去點(diǎn)擊的二級select，故問題不應(yīng)該在返回?cái)?shù)據(jù)遲緩上

解決之后

1.不細(xì)心導(dǎo)致的問題
2.不能同步修改是因?yàn)槎xdialogItemOps時(shí)忘記定義了SplitID這個屬性，導(dǎo)致dialogItemOps.SplitID不是響應(yīng)式的（也可以說是沒用Vue.set添加屬性導(dǎo)致）。
3.這個問題解決了，但是不明白為什么不是響應(yīng)的數(shù)據(jù)，第二次改變時(shí)select1的值時(shí)，select2的option就有數(shù)據(jù)了（雖然是data1），按道理不應(yīng)該一直沒數(shù)據(jù)嗎- -

回答

編輯回答

伴謊

你可以用vue 的watch 方法觀察變化執(zhí)行方法

<el-select v-model.trim="DivisionID">

                <el-option v-for="item in DivisionList" :label="item.Text" :key="item.ID" :value="item.ID">
                </el-option>
            </el-select>

<el-select v-model.trim="LineID">

                <el-option v-for="item in LineList" :label="item.Text" :key="item.ID" :value="item.ID">
                </el-option>
            </el-select>
        watch: {
            DivisionID: function (val) {
                this.$nextTick(function () {
                    me.Line(val);
                })
           }
        },
        
        method:{
        Line: function (val){
         ajax
        }
        }

2017年12月2日 21:39