[vue]Element ui select组件做联动时，二级select选项不更新问题！

Question

问题描述

联动方法：
element ui select在设置联动时， 改变前一个select1的value值，后一个select2的options重请求中新拿。
问题：
现在有一个问题， select1改变后拿到了select2的options，但是select2的选项没有更新。后面发现是select2的选项总是延迟更新一步。
举例：

• 第一步：比如select1改变后，拿到的数据是：data1

此时select2选项时空的；

• 第二步：select1又一次改变值，拿到的数据是data2：

此时select2有了选项，但是是data1的选项数据

• 第三步...

请问有什么解决办法吗？

代码

// 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事件响应函数
selChange: function(key) {
  // 如果改动的是SysID 则需要联动获取分片的options
  if (key === 'SysID') {
    getSplitOptions(this.newList.SysID).then(response => {
      console.log(response)
      this.dialogItemOps.SplitID = response
    })
  }
}

补充：

• select都是v-for循环生成，格式一致，联动功能的实现是在selChange函数中 --- 修改dialogItemOps.SplitID的值

• 请求的数据打印后，我才去点击的二级select， 故问题不应该在返回数据迟缓上

解决之后

1.不细心导致的问题
2.不能同步修改是因为定义dialogItemOps时忘记定义了SplitID这个属性，导致dialogItemOps.SplitID不是响应式的（也可以说是没用Vue.set添加属性导致）。
3.这个问题解决了，但是不明白为什么不是响应的数据，第二次改变时select1的值时，select2的option就有数据了（虽然是data1）， 按道理不应该一直没数据吗- -

Answer 1

你可以用vue 的watch 方法 观察变化 执行方法

<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
        }
        }