从ID Vue.js过滤的数组中删除对象

Question

I am doing a function to delete more then one record based on the checkboxes selected but as I receive the ID (not the full object) I am facing problems to remove it from the array. 我正在执行一项功能，根据所选的复选框删除多条记录，但是当我收到ID（不是完整的对象）时，我面临着将其从阵列中删除的问题。

Somebody can help me? 有人可以帮助我吗？

JSBin 联合会

JS: 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: 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>

Answer 1

There are two main problems with your code, one of them which is already highlighted by JS Bin: 您的代码有两个主要问题，其中之一已由JS Bin突出显示：

You shouldn't define functions within a loop if they reference the looped value. 如果函数引用了循环值，则不应在循环内定义函数。 See here why. 看到这里为什么。 (Unless you wrap it in an IIFE or use let to define your loop variable). （除非将其包装在IIFE中或使用let定义循环变量）。
You are comparing an id of the type Number with a selected entry of the type String with the !== operator. 您正在使用!==运算符将Number类型的ID与String类型的选定条目进行比较。 This wont work, because !== does a strict equal. 这是行不通的，因为!==严格等于。 (You can see that in your container output). （您可以在container输出中看到它）。

To fix the first issue, I would forgo the outer for loop entirely and use indexOf to check if the current val.id exists in this.selected . 为了解决第一个问题，我将完全放弃外部的for循环，并使用indexOf检查当前val.id是否在this.selected 。

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

This wont work yet, because we are still comparing a String with a Number in indexOf . 这还行不通，因为我们仍在比较String和indexOf的Number 。 So we have to transform the val.id into a string (which fixes problem #2). 因此，我们必须将val.id转换为字符串（解决了问题2）。

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

Which leaves us with the following code (after removing the for loop): 剩下下面的代码（删除了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);
     }
  }

});

Note: In order to use the this context of the vue component inside the filter function, we pass it in as the second argument. 注意：为了在filter函数中使用vue组件的this上下文，我们将其作为第二个参数传递。

JS Bin JS斌

从ID Vue.js过滤的数组中删除对象

问题描述

1 个解决方案

解决方案1
1 已采纳 2016-04-01 22:00:05

从ID Vue.js过滤的数组中删除对象

问题描述

1 个解决方案

解决方案1 1 已采纳 2016-04-01 22:00:05

解决方案1
1 已采纳 2016-04-01 22:00:05