HTTP 请求删除记录，然后从数组 Vue.js 中删除对象

Question

这个问题解决后就出来了感谢@nils，希望有人能帮助我！

实际上我有一个记录列表，我可以 select 然后单击其中的一些并删除它们。

上面的代码可以正常工作，但我不确定我做的是否正确，或者它是否随时会出错！

所以我执行 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 数组包含要删除的 ID select。

然后，如果 HTTP 请求正常，我删除 obj，如果不正常，我保留它！

你认为怎样做才是好方法？

--------编辑---------

添加一个JSBin，清楚我需要什么！

实际上我刚刚在我的脚本中发现了一个问题...它不会等待 ajax 响应从数组中删除项目所以如果其中一些记录不能被删除它也将从数组中删除

有人吗？

JS Bin

Answer 1

我做的是这样的：

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

所以您基本上将列表项传递给 delete 方法，该方法依次执行：

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

这是否解决了您的问题？

Answer 2

因为我虽然那个代码不起作用，但我找到了一个很好的解决方案！

它不起作用，因为它是一个批量删除，所以每次删除都是一个请求，但我已经一次让每个人都这样做，脚本不会等待答案从列表中删除项目！如果记录没有通过某些验证最终被删除，它也会从列表中删除！

所以我所做的是发送所有删除请求，当最后一个请求完成时，我发出一个新请求以更新整个列表！

代码如下：

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

希望对大家有所帮助！

HTTP 请求删除记录，然后从数组 Vue.js 中删除对象

HTTP Request to remove record and then remove obj from array Vue.js

javascript

arrays

vue.js

vue-resource