Question

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

当他们按下按钮时，他们会弹出一个确认对话框。当他们单击“确定”时，将调用一个保存方法，以通过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仅更改数据库中的一行，则意味着对v-data-table上的仅一行具有视觉效果，那么当您从后端获得“成功”响应时，就可以在本地更改数据。

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

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

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

1 个答案: