REST API Patch 调用后如何刷新 v-data-table？

Posted 2023-02-22

【中文标题】REST API Patch 调用后如何刷新 v-data-table？

【英文标题】：How to refresh v-data-table after REST API Patch call?

【发布时间】：2019-09-25 09:37:40

【问题描述】：

我在 Vuetify 中有一个数据表，它通过 REST 获取请求填充，使用的是在安装应用程序时调用的函数“getData”。表中的<td> 具有用户可以点击以“锁定”期间（行/列交叉点）的按钮。

当他们点击按钮时，他们会弹出一个确认对话框。当他们点击“OK”时，会调用一个保存方法，通过 REST PATCH 请求将当前日期写回数据库（见下文）。

我的问题是，网格没有根据补丁请求的结果进行更新。我必须手动刷新页面才能看到结果。这里的常见模式是什么？我应该通过getData 再次拉下数据以刷新表格吗？我应该直接更新数据表所在的数组吗？

getData 方法：

getData() 
  var self = this;
  return axios
    .get("http://127.0.0.1:5000/api/estimatefinal/periods?dataset=capital")
    .then(function(response) 
      self.periods = response.data;
    )
    .catch(function(error) 
      alert(error);
    );
,

保存方法：

save(item) 
  var self = this;
  axios
    .patch("http://localhost:5000/api/estimatefinal/period/" + self.id, 
      date: moment(self.selected_date, "YYYY-MM-DD").format(
        "YYYY-MM-DDTH:m:s"
      )
    )
    .then(function() 
      this.getData();  // ????
    )
    .catch(function(error) 
      alert(error)
    );
  this.getData();  // ????
  this.close();

【参考方案1】：

如果您的 PATCH 仅更改 DB 中的一行，则意味着仅对您的 v-data-table 上的一行有视觉影响，那么当您从后端获得“成功”响应时，您可以在本地更改数据。

另一方面，如果您的 PATCH 更改了 DB 中的许多其他内容（也在 v-data-table 中），那么您最好的选择可能是在收到 PATCH 响应后更改为 getData()。

重点是在 DB 和屏幕v-data-table 上保持相同的值“图片”。

【讨论】：

因此，如果性能不是问题，最安全的做法是从数据库刷新，对吗？由于某种原因，从 then 子句调用 getData 在上面不起作用。

是的，如果性能不是问题，这是最安全的选择。但我不确定为什么你的代码不起作用。在.then 内添加debugger（在调用.getData() 之前）和getData() 内，只是为了检查执行情况如何，在哪里停止等等......（我会这样做:)）