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

Question

我在 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();
}

Answer 1

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

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

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