I am trying to delete multiple elements from an array through checkbox i am using vue.js but i am unable to figure out how to do it

user_17668644 0
Viewed 159

i have a scenario where I am triggering an event on button click after selecting elements from the grid when the button is clicked I need to remove that element from the current modal/grid

 CheckedNames:["a","b","c"],
  CheckedNamesId:[1,2,3],



  DeletefromArray(){

 this.CheckedNames.forEach(element => {

this.deleteItem(this.CheckedNamesId,this.CheckedNamesId.length);

 });


},
deleteItem(index,length) {
  this.List.splice(index, length)
},

  check: function(e,row) {
    this.CheckedNamesId.push(row.id)
   console.log(this.CheckedNamesId)
    },

Now if I select "a","b","c" by the check box, I need to remove it from the array,

vue.js javascript
2 Answers

If I understood you correctly try something like following snippet:

new Vue({
  el: '#demo',
  data() {
    return {
      names: [{id: 1, name: 'a'},{id: 2, name: 'b'}, {id: 3, name: 'c'}, {id: 4, name: 'd'}, {id: 5, name: 'e'}, {id: 6, name: 'f'}, {id: 7, name: 'g'}],
      checkedNames: []
    }
  },
  methods: {
    check(item) {
      if (!this.checkedNames.length || !this.checkedNames.find(f => item.id === f.id)) {
        this.checkedNames.push(item)
      } else {
        this.checkedNames = this.checkedNames.filter(f => item.id !== f.id)
      }
    },
    del() {
      this.names = this.names.filter(a => !this.checkedNames.includes(a))
      this.checkedNames = []
    }
  }
})

Vue.config.productionTip = false
Vue.config.devtools = false
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
  <ul>
    <li v-for="item in names" :key="item.id">
      {{ item.name }}
      <input type="checkbox" @click="check(item)" />
    </li>
  </ul>
  <button @click="del">Delete</button>
</div>

user_119891890

You can try like the code below. When looping in List array check if id of the element is present in checkedNameID array by using indexof. If present add that element's index in a array defined outside loop. Then you can slice it away using another loop from array. When you slice use 1 as second parameter it will remove 1 element at a a time in loop.

const arr = []
deleteFromArray(){
  this.List.forEach((element,index) => {
    if(this.checkedNameID.indexOf(element.id) !== -1){
      this.arr.push(index);
    }
  });
  arr.forEach(item => {
    this.List.splice(index,1);
  }
},
user_89526390
Related