I am trying to delete multiple elements from an array through checkbox i am using vue.js but i am un-CodePudding

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,

CodePudding user response：

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>

CodePudding user response：

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);
  }
},