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