从由 Id Vuejs 过滤的数组中删除对象答案

【问题标题】：Remove object from array filtered by an Id Vuejs从由 Id Vuejs 过滤的数组中删除对象
【发布时间】：2016-07-21 20:05:43
【问题描述】：

我正在执行一项功能，根据选中的复选框删除一个以上的记录，但是当我收到 ID（不是完整对象）时，我遇到了从数组中删除它的问题。

有人可以帮助我吗？

JSBin

JS：

new Vue({

  el: 'body',

  data: {
    record: {},
    selected: [],
    list: [
        { name: 'Google', id: 1, cat: 'Category 1' },
        { name: 'Facebook', id: 2, cat: 'Category 2' },
      ],
  },

  methods: {
    deleteSelected: function () {
      for (var r in this.selected) {
        this.list = this.list.filter(function(val, i) {
          return val.id !== this.selected[r];
        });
      }
    }
  }

});

HTML：

<body>

  <div class="container">

    <div class="row p-10">
      <div class="col-md-6 m_md_bottom_15">
        <span class="btn btn-danger" data-toggle="tooltip" data-original-title="Delete" @click="deleteSelected()">Remove selected</i></span>
      </div>
    </div>
  <hr>
   <table class="table table-striped table-bordered">
     <thead>
       <tr>
         <th></th>
         <th>Id</th>
         <th>Name</th>
         <th>Actions</th>
       </tr>
     </thead>
     <tbody>
       <tr v-for="r in list">
         <td><input type="checkbox" v-model="selected" value="{{ r.id }}"></td>
         <td class="text-center" style="width:90px"> {{ r.id }} </td>
         <td> {{ r.name }} </td>
         <td class="text-center" style="width:90px">
           <span class="btn btn-warning btn-xs" @click="edit(r)"><i class="fa-fw fa fa-pencil"></i></span>
         </td>
       </tr>
     </tbody>
  </table>
  </div>

  <div class="container">
    <pre>{{ $data | json }}</pre>
  </div>


  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.20/vue.min.js"></script>
</body>

【问题讨论】：

请始终在您的问题中包含您的代码。

标签： javascript arrays vue.js

【解决方案1】：

您的代码有两个主要问题，其中一个已被 JS Bin 突出显示：

如果函数引用循环值，则不应在循环内定义函数。 See here why.（除非您将其包装在 IIFE 中或使用 let 定义您的循环变量）。
您将Number 类型的ID 与String 类型的选定条目与!== 运算符进行比较。 This wont work, because !== does a strict equal.（您可以在 container 输出中看到）。

为了解决第一个问题，我将完全放弃外部 for 循环并使用 indexOf 检查当前的 val.id 是否存在于 this.selected 中。

this.selected.indexOf(val.id) === -1;

这还行不通，因为我们仍在将String 与indexOf 中的Number 进行比较。所以我们必须将val.id 转换成一个字符串（这解决了问题#2）。

this.selected.indexOf(val.id.toString()) === -1;

剩下的代码如下（删除for循环后）：

new Vue({

  el: 'body',

  data: {
    record: {},
    selected: [],
    list: [
        { name: 'Google', id: 1, cat: 'Category 1' },
        { name: 'Facebook', id: 2, cat: 'Category 2' },
      ],
  },

  methods: {
    deleteSelected: function () {
        this.list = this.list.filter(function(val, i) {
            return this.selected.indexOf(val.id.toString()) === -1;
        }, this);
     }
  }

});

注意：为了在filter函数内部使用vue组件的this上下文，we pass it in as the second argument.

JS Bin

【讨论】：

很好的解释无！如果我需要在从数组中删除元素之前发出 HTTP 请求以将其从数据库库中删除，我应该将它放在过滤器中吗？
感谢您的后续问题。不过，为了帮助这个问题的未来访问者获得明确的答案，最好在单独的问题中提出任何进一步的问题（这样也更容易通过搜索引擎找到）。如果我的回答解决了您最初的问题，您可以投票赞成答案并将其标记为正确（使用复选标记）。见：meta.stackexchange.com/questions/5234/…
很高兴知道！完成尼尔斯！我又发了一个帖子！请问您知道如何处理吗？谢谢你帮了我很多！ stackoverflow.com/questions/36379439/…>