element-ui 二級聯動 選擇器 無法選擇 或者 顯示錯誤 異常

 剛開始的配製如下：

     <el-form-item label="所屬分類">
        <el-select v-model="courseInfo.subjectParentId" @change="firstChange" 
        placeholder="請選擇一級分類">
          <el-option
            v-for="item in oneList"
            :key="item.id"
            :label="item.title"
            :value="item.id"
          ></el-option>
        </el-select>

        <el-select v-model="courseInfo.subjectId" placeholder="請選擇二級分類">
          <el-option
            v-for="item in twoList"
            :key="item.id"
            :label="item.title"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>

  firstChange(value) {
      this.courseInfo.subjectId = ''     
      for(let i=0;i< this.oneList.length;i++){
        const oneSubject = this.oneList[i]
        if(oneSubject.id === value){
          this.twoList = oneSubject.children
        }
      }
    }

data() {
    return {
      courseInfo: {},
      oneList: [],
      twoList: []
    }
  },

結果就是二級選擇器裏面有值，但是點擊後選擇框label 沒有變更，或者label框變成了個id值，去掉

this.courseInfo.subjectId = ''

這一句，又沒辦法把二級選擇器的上一次選擇值取消，很詭異！

搞了好久，才發現給form對象屬性添加上初始值就好了，因爲沒有屬性初始值也能保存數據發送後臺，所以偷懶沒有初始化屬性值，結果就出現了這異常。

初始化屬性值就回到正規了：

      courseInfo: {
        title: "",
        subjectId: "",
        subjectParentId: "",
        teacherId: "",
        lessonNum: 0,
        description: "",
        cover: "",
        price: 0
      },