從ID Vue.js過濾的數組中刪除對象

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突出顯示：

如果函數引用了循環值，則不應在循環內定義函數。 看到這里為什么。 （除非將其包裝在IIFE中或使用let定義循環變量）。
您正在使用!==運算符將Number類型的ID與String類型的選定條目進行比較。 這是行不通的，因為!==嚴格等於。 （您可以在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上下文，我們將其作為第二個參數傳遞。

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