1、添加修改章节方法
在course/chapter.vue页面的编辑按钮中添加修改章节方法。
java
<el-button style type="text" @click="openUpdateChapter(chapter.id)">编辑</el-button>
2、方法调用接口实现章节的数据回显
(1)实现章节的数据回显的方法JS 实现
java
//根据章节id查询章节的回显数据
openUpdateChapter(chapterId) {
//显示弹框
this.dialogChapterFormVisible = true;
//调用接口回显数据
chapter.getChapterInfo(chapterId).then(response => {
this.chapter = response.data.chapter;
});
},
(2)修改章节数据方法JS实现
java
//新增获取修改章节
saveOrUpdate() {
if (this.chapter.id) {
//修改
this.updateChapterInfo()
} else {
//添加
this.saveChapter();
}
},
//修改章节
updateChapterInfo() {
//调用接口实现
chapter.updateChapter(this.chapter).then(response => {
//关闭修改弹框
this.dialogChapterFormVisible = false;
//提示
this.$message({
type: "success",
message: "修改章节成功!"
});
//刷新页面
this.getChapterVideoList();
});
},
3、修改后,再点击添加
(1)出现问题:刚刚修改的章节数据未被清空。
(2)解决方案:添加章节方法中添加清空数据的方法。
java
<el-button type="text" @click="openAddChapter()">添加章节</el-button>
. . . . . .
//添加章节前的操作
openAddChapter(){
//显示弹框
this.dialogChapterFormVisible = true
//清空数据
this.chapter={}
},