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

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={}
    },
相关推荐
非 白7 分钟前
【Java分布式】Nacos注册中心
java·开发语言·nacos·注册中心
吃海鲜的骆驼12 分钟前
服务异步通讯与RabbitMQ
java·分布式·后端·rabbitmq
羱滒16 分钟前
sql调优之数据库开发规范
java·数据库·数据库开发
化作繁星39 分钟前
在 Vue 3 中,如何缓存和复用动态组件
前端·vue.js·缓存
Forget the Dream44 分钟前
设计模式之责任链模式
java·c++·设计模式·责任链模式
jonyleek1 小时前
「JVS更新日志」低代码、企业会议、智能BI、智能排产2.26更新说明
java·大数据·低代码·数据分析·软件需求
计算机小白一个1 小时前
蓝桥杯 Java B 组之最短路径算法(Dijkstra、Floyd-Warshall)
java·数据结构·算法·蓝桥杯
曼岛_1 小时前
[密码学实战]Java实现SM4加解密(ecb,cbc)及工具验证
java·密码学
一只小姜丝3321 小时前
解决各大浏览器中http地址无权限调用麦克风摄像头问题
网络·vue.js·网络协议·http
Forget the Dream2 小时前
设计模式之代理模式
java·c++·设计模式·代理模式