二级分类的清空

加 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 = ''
        }
      }


    },

清空前

清空后

__EOF__

本文作者：cnhkzyy
本文链接：https://www.cnblogs.com/my_captain/p/16192628.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！