OpenAuth.net入門【5】——解決添加完數據，在未刷新列表時執行刪除，數據未被真正刪除的問題

接前4篇

OpenAuth.net入門【1】——代碼生成過程記錄 - 星星c# - 博客園 (cnblogs.com)

OpenAuth.net入門【2】——代碼生成後補全編輯功能 - 星星c# - 博客園 (cnblogs.com)

OpenAuth.net入門【3】——代碼生成後補全查詢功能 - 星星c# - 博客園 (cnblogs.com)

OpenAuth.net入門【4】——自定義數據列表和編輯界面 - 星星c# - 博客園 (cnblogs.com)

 

完成了前4篇的內容後，在測試的時候發現一個問題

描述：

在新添加完數據，馬上刪掉【不執行重新查詢操作】，然後再刷新，剛纔刪掉的數據就顯示到列表上了，數據庫這條記錄也存在。

 

分析：

我在後臺的API的刪除方法里加斷點，發現新增的那條記錄刪除時傳過來的ID是空的。

根據按鈕上的事件，找到方法，如下圖：

發現這個數據拿來後，直接在前臺變量裏做了個插入操作，並沒有真正的重新查詢，而且新增後返回的數據裏沒有包含ID，所以後臺沒辦法真正刪除，如下圖：

 

思路有兩種：

第一種解決方法：

　　思路是重新加載列表，簡單粗暴些。

　　把 this.list.unshift(this.temp);換成this.getList();

　　改完後如下圖：

 

 第二種解決方法：

　　思路是：把數據的ID從後臺返回回來，然後給實體賦上值，然後刪除的時候就可以正常刪除了

　　(1)改造後臺：

 

 

 　　(2)改造前臺：

 

 代碼如下：

    createData() {
      // 保存提交
      this.$refs["dataForm"].validate(() => {
        farmInternetDeviceTypeMsts.add(this.temp).then((response) => {
          this.temp.id = response.result;
          this.list.unshift(this.temp);
          this.dialogFormVisible = false;
          this.$notify({
            title: "成功",
            message: "創建成功",
            type: "success",
            duration: 2000,
          });
        });
      });
    },

 

 

 

附：vue項目裏沒有辦法添加deubgger的解決方法：

 

  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {
      "no-debugger":"off",
      "no-console":"off"
    }
  },

記得要重啓項目，我用的是vscode，我是關掉後再打開的

原文地址：新建vue項目出現error Unexpected ‘debugger‘ statement no-debugger_mochen_mj的博客-CSDN博客