Как обновить v-data-таблицу после вызова REST API Patch? - PullRequest
Новая
       39

Как обновить v-data-таблицу после вызова REST API Patch?

0 голосов
/ 07 мая 2019

У меня есть таблица данных в Vuetify, которая заполняется через REST-запрос get, используя функцию «getData», которая вызывается при монтировании приложения.У <td> в таблице есть кнопки, по которым пользователь может нажать, чтобы «заблокировать» период (пересечение строк / столбцов).

Когда они нажимают кнопку, они получают всплывающее диалоговое окно подтверждения.Когда они нажимают «OK», появляется метод save, вызываемый для записи текущей даты обратно в базу данных с помощью запроса 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 Ответ

0 голосов
/ 07 мая 2019

Если ваш PATCH изменяет только одну строку в БД, значит, визуально влияет только на одну строку в вашем v-data-table, тогда вы можете изменить данные локально, когда получите «успешный» ответ от серверной части.

Если, с другой стороны, ваш PATCH меняет много других вещей в БД (также в v-data-table), ваш лучший вариант, вероятно, будет getData() после того, как вы получите ответ PATCH.

Смысл в том, чтобы сохранить ту же самую «картинку» значений в БД и на экране v-data-table.

...