联动时二级select显示的是之前选定的value值得问题

 在vue项目中，一级select的值改变时，相应的改变二级select的下拉数据集；但页面上，二级select显示的是之前选定的value值

<el-form-item label="一级产品类型" prop="upId">
        <el-select
          v-model="productForm.upId"
          filterable
          :class="{'isPlaceholder': !productForm.upId}"
          @change="type1SelChange"
          style="width: 200px;"
        >
          <el-option
            v-for="dict in type1Options"
            :key="dict.id"
            :label="dict.name"
            :value="dict.id"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="二级产品类型" prop="typeId">
        <el-select
          v-model="productForm.typeId"
          filterable
          :class="{'isPlaceholder': !productForm.typeId}"
          style="width: 200px;"
        >
          <el-option
            v-for="dict in type2Options"
            :key="dict.id"
            :label="dict.name"
            :value="dict.id"
          />
        </el-select>
      </el-form-item>

data() {
    return {
      // 表单数据
      productForm: {}
    }
  },
  methods() {
      /** 二级产品类型下拉框数据列表 */
        getType2Options (val) {
            getSecondProTypeList(val).then(res => {
                if(res.code === 200){
                    this.type2Options = res.rows;
                } else {
                    this.msgError(res.msg);
                }
            }).catch(() => {});
        },
        /** 一级产品类型下拉框选中值，查询二级产品类型下拉框数据列表 */
        type1SelChange (val) {
            if(val === ''){
                //若一级产品类型没有选中值,则直接置空二级产品类型信息集
                this.type2Options = [];
                return ;
            }
            this.getType2Options(val);
        }
  }

解决：在查询二级select之前，清空二级select的绑定值，this.productForm.typeId = undefined

但这样会造成二级select下拉选择无效，有2种解决办法：

1.用this.$set(this.productForm, 'typeId ', undefined)  方式来清空

/** 一级产品类型下拉框选中值，查询二级产品类型下拉框数据列表 */
type1SelChange (val) {
    //this.productForm.typeId = undefined; //重置二级产品类型，解决select显示的是之前选定的value值得问题
    this.$set(this.productForm, 'typeId ', undefined); //解决前面清空上一次的值，会引发下拉框选择无效的问题
    if(val === ''){
        //若一级产品类型没有选中值,则直接置空二级产品类型信息集
        this.type2Options = [];
        return ;
    }
    this.getType2Options(val);
}

 

2.在data()中，明确定义属性值

data() {
    return {
      // 表单数据
      productForm: {
         id: undefined, // 编号
         upId: undefined, // 一级产品类型编号
         typeId: undefined, // 二级产品类型
      }
    }
}

参考： 

解决vue中data对象重新赋值无效(未更改)的问题

vue中this.$set的用法