二级分类的清空

this.courseInfo.subjectId = ''的作用就是,当第一次选了一级分类-前端开发、选了二级分类-vue后,由于双向绑定,courseInfo.subjectId有值,如果不做清空,会导致第二次选了一级分类-后端开发后,二级分类还是显示原来的值,即二级分类-vue,这显然是不对的

 <!-- 所属分类 TODO -->
        <el-form-item label="课程分类">
          <el-select
              v-model="courseInfo.subjectParentId"
              placeholder="一级分类" @change="subjectLevelOneChanged">
              
              <el-option
              v-for="subject in subjectOneList"
              :key="subject.id"
              :label="subject.title"
              :value="subject.id"/>
          </el-select>

          <!-- 二级分类 -->
          <el-select
              v-model="courseInfo.subjectId"
              placeholder="二级分类">
              
              <el-option
              v-for="subject in subjectTwoList"
              :key="subject.id"
              :label="subject.title"
              :value="subject.id"/>
          </el-select>
        </el-form-item>
......
 data() {
    return {
      saveBtnDisabled: false, // 保存按钮是否禁用
      courseInfo: {
            title: '',
            subjectId: '',   //二级分类id
            subjectParentId: '',   //一级分类id
            teacherId: '',
            lessonNum: 0,
            description: '',
            cover: '',
            price: 0
      },
      teacherList: [],    //封装所有的讲师
      subjectOneList:[],   //一级分类
      subjectTwoList: [],   //二级分类
    }
  },
......
 methods: {

    //点击某个一级分类,触发change,显示对应二级分类
    subjectLevelOneChanged(value) {
      //value就是一级分类的id值
      //alert(value)
      for(let i = 0; i < this.subjectOneList.length; i++) {
        if(this.subjectOneList[i].id == value) {
          this.subjectTwoList = this.subjectOneList[i].children

          this.courseInfo.subjectId = ''
        }
      }


    },

清空前

清空后

posted @ 2022-04-25 23:39  cnhkzyy  阅读(107)  评论(0编辑  收藏  举报