Question

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

有人可以帮助我吗？

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>

Answer 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中将Number与indexOf进行比较。所以我们必须将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);
     }
  }

});

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

JS Bin

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

1 个答案: