HTTP-запрос на удаление записи, а затем удаление объекта из массива Vue.js

Этот вопрос возник после решения этой проблемы спасибо @nils и надеюсь, что кто-нибудь сможет мне помочь!

На самом деле у меня есть список записей, и я могу выбрать некоторые из них и удалить их одним щелчком мыши.

Приведенный выше код работает так, как должен быть, но я не уверен, правильно ли я делаю и может ли он сломаться в любой момент!

Итак, я делаю HTTP-запрос для удаления записи внутри Array.filter()... это правильно? Я чувствую, что это совсем не так!

deleteSelected() {
  this.list = this.list.filter(function(val, i) {
    var id = val.id.toString();

    if (this.selected.indexOf(id) === -1) {
      return true;
    } else {

      this.$http.delete('/sources/' + id)
        .then(function() {
          return false;
        }, function() {
          return true;
        });

    }
  }, this);

  this.selected = [];
},

Массив this.list содержит мой список объектов, а массив this.selected содержит идентификаторы, выбранные для удаления.

Затем, если HTTP-запрос проходит нормально, я удаляю объект, а если нет, то сохраняю его!

Как вы думаете, это хороший способ сделать это?

---------EDIT---------

Добавление JSBin, чтобы было ясно, что мне нужно!

На самом деле я только что обнаружил проблему в своем скрипте... Он не ждет ответа ajax для удаления элемента из массива, поэтому, если какую-то из этих записей нельзя удалить, она будет удалена из массива как хорошо

Кто-то?

JS Bin


javascript arrays vue.js vue-resource
person Gustavo Bissolli    schedule 02.04.2016    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Что я делаю, это что-то вроде:

<ul>
     <li v-for="item in list" @click="deleteItem(item)"></li>
</ul>

Таким образом, вы в основном передаете элемент списка методу удаления, который, в свою очередь, делает:

deleteItem: function(item) {
    # Ajax delete request
    .successs(
        this.list.$remove(item);
    )

Это решает вашу проблему?

person Liren    schedule 03.04.2016
comment
Это не то, что мне нужно, Лижэнь! Я только что добавил JS Bin, чтобы было ясно, что мне нужно! Посмотрите, если вы знаете, как это сделать! - person Gustavo Bissolli; 03.04.2016
comment
Не могу проверить это прямо сейчас, но я попытался удалить ваш запрос ajax, и это заставляет код работать. Поэтому, вероятно, посмотрите, что происходит на бэкэнде этого запроса. - person Liren; 03.04.2016
comment
Да, это так! Но поскольку я новичок в этой структуре внешнего интерфейса, я хотел бы знать, правильный ли это способ сделать это. Я поместил это раньше в FOR LOOPING, и кто-то сказал, что это неправильно... Поэтому я изменил его, и теперь я хотел бы сейчас, если теперь все в порядке =) - person Gustavo Bissolli; 04.04.2016
comment
На самом деле я обнаружил проблему =/.... если некоторые из этих регистров не могут быть удалены, независимо от того, почему элемент элемента удален из массива... он не ждет ответа HTTP... - person Gustavo Bissolli; 04.04.2016

arrow_upward
0
arrow_downward

Как я понял, этот код не работает, но я нашел хорошее решение!

Это не работает, потому что это массовое удаление, поэтому каждое удаление - это один запрос, но я сделал все сразу, и скрипт не ждет ответа, чтобы удалить элемент из списка! Если запись не будет удалена какой-либо проверкой, она также будет удалена из списка!

Итак, что я сделал, так это отправил все запросы на удаление, и когда последний из них закончился, я сделал новый запрос, чтобы обновить весь список!

Вот код:

// block the records list
$(this.$els.dataGrid).block();

// init a counter
var itemsProcessed = 0;

// get length of records to be deleted
var length = this.selected.length;

// looping to delete one for each
this.selected.forEach((item) => {

  // removeLossReasonById() is a method that mand the HTTP DELETE request and then()
  this.removeLossReasonById(item).then((response) => {

    // if does not delete for any reason show a notify
    if (!response.ok)
      $.Notification.error(response.data);

    // increment the counter
    itemsProcessed++;

    // if is the last iteration it's gonna unblock the records list and clear my array of items to be removed
    if (itemsProcessed === length) {
      this.selected = [];
      this.getLossReasons().then(() => $(this.$els.dataGrid).unblock());
    }
  });
});

Надеюсь, это поможет кому-то!

person Gustavo Bissolli    schedule 14.04.2016