二级分类的清空
加 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 = ''
}
}
},
清空前
清空后