课程程大纲-章节修改(前端)

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={}
    },
相关推荐
纪元A梦4 分钟前
华为OD机试真题——绘图机器(2025A卷:100分)Java/python/JavaScript/C++/C/GO最佳实现
java·javascript·c++·python·华为od·go·华为od机试题
会飞的鱼先生6 分钟前
Vue3的内置组件 -实现过渡动画 TransitionGroup
前端·javascript·vue.js·vue
秋天的一阵风12 分钟前
Vue3探秘系列— 路由:vue-router的实现原理(十六-上)
前端·vue.js·面试
秋天的一阵风13 分钟前
Vue3探秘系列— 路由:vue-router的实现原理(十六-下)
前端·vue.js·面试
24k小善17 分钟前
FlinkSql入门与实践
java·大数据·flink·云计算
CodeCraft Studio31 分钟前
Excel处理控件Spire.XLS系列教程:Java设置Excel活动工作表或活动单元格
java·python·excel
数据智能老司机37 分钟前
React关键概念——理解React组件与JSX
react native·react.js·前端框架
JustHappy37 分钟前
啥是Hooks?为啥要用Hooks?Hooks该怎么用?像是Vue中的什么?React Hooks的使用姿势(上)
前端·vue.js·react.js
瓯雅爱分享1 小时前
任务管理系统,Java+Vue,含源码与文档,科学规划任务节点,全程督办保障项目落地提效
java·mysql·vue·软件工程·源代码管理
chxii1 小时前
2.3java运算符
java