vue新增修改完成后页面不刷新问题

最新推荐文章于 2024-01-16 09:56:33 发布

小红帽与灰太狼

最新推荐文章于 2024-01-16 09:56:33 发布

阅读量1.5k

点赞数

分类专栏： vue 文章标签： vue vue.js

本文链接：https://blog.youkuaiyun.com/weixin_42277719/article/details/108645652

版权

vue 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一种解决Vue应用中新增或修改数据后页面不自动刷新的问题。通过对比两种submit处理方法，展示了如何利用async/await确保操作完成后能够及时刷新页面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue新增修改完成后页面不刷新问题

这是一开始使用的方法

/*submitReject () {
        if (!this.verify()) {
          return false
        }
        if (this.rewData.id && !this.readonly) {
          console.log("修改")
          update(this.addForm).then(res => {
              if (res.code == 200) {
                  this.$message({
                      type: 'success',
                      message: '修改成功!'
                  });
              } else {
                  this.$message.error(res.message);
              }
              this.close('confirm')
          })
        }  else if (!this.rewData.id ) {
          console.log("新增")
          insert(this.addForm).then(res => {
              if (res.code == 200) {
                  this.$message({
                      type: 'success',
                      message: '保存成功!'
                  });
              } else {
                  this.$message.error(res.message);
              }
              this.close('confirm')
          })
        }else{
          console.log("close")
        }
        this.close('confirm')
      },*/

修改后自动刷新的方法

/*submitReject () {
        if (!this.verify()) {
          return false
        }
        if (this.rewData.id && !this.readonly) {
          console.log("修改")
          update(this.addForm).then(res => {
              if (res.code == 200) {
                  this.$message({
                      type: 'success',
                      message: '修改成功!'
                  });
              } else {
                  this.$message.error(res.message);
              }
              this.close('confirm')
          })
        }  else if (!this.rewData.id ) {
          console.log("新增")
          insert(this.addForm).then(res => {
              if (res.code == 200) {
                  this.$message({
                      type: 'success',
                      message: '保存成功!'
                  });
              } else {
                  this.$message.error(res.message);
              }
              this.close('confirm')
          })
        }else{
          console.log("close")
        }
        this.close('confirm')
      },*/
      async submitReject () {
        if (!this.verify()) {
          return false
        }
        if (this.rewData.id && !this.readonly) {
          console.log("修改")
          await update(this.addForm)
        }  else if (!this.rewData.id ) {
          console.log("新增")
          await insert(this.addForm)
        }else{
          console.log("close")
        }
        this.close('confirm')
      },