0

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.

Somebody can help me?

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>
nils
  • 25,734
  • 5
  • 70
  • 79
Gustavo Bissolli
  • 1,551
  • 3
  • 22
  • 36

1 Answers1

1

There are two main problems with your code, one of them which is already highlighted by JS Bin:

  1. 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).

  2. You are comparing an id of the type Number with a selected entry of the type String with the !== operator. This wont work, because !== does a strict equal. (You can see that in your container output).

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.

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

This wont work yet, because we are still comparing a String with a Number in indexOf. So we have to transform the val.id into a string (which fixes problem #2).

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

Which leaves us with the following code (after removing the for loop):

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.

JS Bin

Community
  • 1
  • 1
nils
  • 25,734
  • 5
  • 70
  • 79
  • Great explanation nils! In case I need to make a HTTP request to delete it from my database base before remove the element from the array should I make it inside the filter? – Gustavo Bissolli Apr 01 '16 at 22:48
  • Thank you for the follow up question. To help future visitors of this question get a clear answer though, it would be best if you asked any further questions in a separate question (thus making it easier to find via search engines as well). And if my answer has solved your initial question, you can upvote the answer and mark it as correct (using the checkmark). See: http://meta.stackexchange.com/questions/5234/how-does-accepting-an-answer-work – nils Apr 02 '16 at 16:49
  • Good to know! Done nils! I've made another post! Could you see if you know how to deal with it please? Thanks man you helped me a lot! – Gustavo Bissolli Apr 02 '16 at 22:38