element-ui2级联动下拉框问题

Question

就是我使用了2级联动下拉框,然后每个赋予了filterable属性, 当我下拉第一个的时候框的时候第二个下拉框会出现相应的数据,现在我需要做的就是 当我选择第一个下拉框,选择不同的值我就要清空第二个下拉框选中的值,然后我change事件第二个下拉框直接赋予空,一旦我赋予为空了,但是第二个下拉框就选不中了 ,这怎么解决呢

<el-form-item label="新学期" prop="semesterId">

            <el-select
              filterable
              placeholder="请选择"
              v-model="updformObj.semesterId"
              clearable
              @change="stuByClass()"
            >
              <el-option
                v-for="item in semesterList"
                :label="item.semesteName"
                :value="item.id"
                :key="item.id"
              >{{item.semesteName}}</el-option>
            </el-select>
          </el-form-item>
          
          <el-form-item label="新班级" prop="newClassId">
            <el-select filterable placeholder="请选择" v-model="updformObj.newClassId" clearable>
              <el-option
                v-for="item in ClassList"
                :label="item.className"
                :value="item.id"
                :key="item.id"
              >{{item.className}}</el-option>
            </el-select>
          </el-form-item>
          
          
          stuByClass(){
          this.updformObj.newClassId=null
          //这里一旦我赋予了值,我第二个下拉框就选不中了
          }

Answer 1

你两个select绑定的值updformObj是否是这种绑定方式

  data() {
        return {
            updformObj:{
                semesterId:'',
                newClassId:''
            },
            semesterList:[
                {semesteName:'semesteName1',id:"1"},
                {semesteName:'semesteName2',id:"2"},
                {semesteName:'semesteName3',id:"3"}
            ],
            ClassList:[
                {className:'class1',id:"1"},
                {className:'class2',id:"2"},
                {className:'class3',id:"3"}
            ],
        }
    },

这样就是可以的，但是如果data只绑定了

 updformObj:{},

这样当你清空的时候，v-model对象的key也没有了，所以就不起作用了

Answer 2

初始化的时候没有建 key