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

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={}
    },
相关推荐
好奇的菜鸟1 小时前
如何在IntelliJ IDEA中设置数据库连接全局共享
java·数据库·intellij-idea
DuelCode2 小时前
Windows VMWare Centos Docker部署Springboot 应用实现文件上传返回文件http链接
java·spring boot·mysql·nginx·docker·centos·mybatis
优创学社22 小时前
基于springboot的社区生鲜团购系统
java·spring boot·后端
幽络源小助理2 小时前
SpringBoot基于Mysql的商业辅助决策系统设计与实现
java·vue.js·spring boot·后端·mysql·spring
猴哥源码2 小时前
基于Java+springboot 的车险理赔信息管理系统
java·spring boot
YuTaoShao3 小时前
【LeetCode 热题 100】48. 旋转图像——转置+水平翻转
java·算法·leetcode·职场和发展
Dcs3 小时前
超强推理不止“大”——手把手教你部署 Mistral Small 3.2 24B 大模型
java
东阳马生架构4 小时前
订单初版—1.分布式订单系统的简要设计文档
java
Code blocks4 小时前
使用Jenkins完成springboot项目快速更新
java·运维·spring boot·后端·jenkins
荔枝吻4 小时前
【沉浸式解决问题】idea开发中mapper类中突然找不到对应实体类
java·intellij-idea·mybatis