如何在 REST API 补丁调用后刷新 v-data-table?

Question

我在 Vuetify 中有一个数据表，它通过 REST get 请求填充，使用挂载应用程序时调用的函数"getData"。 表中的<td>具有用户可以点击的按钮来"锁定"句点(行/列交集)。

当他们点击按钮时，他们会收到一个弹出的确认对话框。 当他们点击"确定"时，有一个保存方法被调用通过 REST PATCH 请求将当前日期写回数据库(见下文)。

我的问题是，网格没有使用补丁请求的结果进行更新。 我必须手动刷新页面才能看到结果。 这里的常见模式是什么？ 我是否应该通过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 只更改了数据库中的一行，意味着只对v-data-table上的一行有视觉效果，那么当你从后端获得"成功"响应时，你可以在本地更改数据。

另一方面，如果您的 PATCH 更改了数据库中的许多其他内容(也在v-data-table中)，则最好的选择可能是在获得 PATCH 响应后getData()。

重点是在数据库和屏幕上保持相同的值"图片"v-data-table。