在course/chapter.vue页面的编辑按钮中添加修改章节方法。vue
<el-button style type="text" @click="openUpdateChapter(chapter.id)">编辑</el-button>
(1)实现章节的数据回显的方法JS 实现java
//根据章节id查询章节的回显数据 openUpdateChapter(chapterId) { //显示弹框 this.dialogChapterFormVisible = true; //调用接口回显数据 chapter.getChapterInfo(chapterId).then(response => { this.chapter = response.data.chapter; }); },
(2)修改章节数据方法JS实现web
//新增获取修改章节 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(); }); },
(1)出现问题:刚刚修改的章节数据未被清空。
ide
(2)解决方案:添加章节方法中添加清空数据的方法。svg
<el-button type="text" @click="openAddChapter()">添加章节</el-button> . . . . . . //添加章节前的操做 openAddChapter(){ //显示弹框 this.dialogChapterFormVisible = true //清空数据 this.chapter={} },