Tengo un escenario en el que estoy activando un evento al hacer clic en un botón después de seleccionar elementos de la cuadrícula cuando se hace clic en el botón. Necesito eliminar ese elemento de la cuadrícula/modal actual.
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) },Ahora, si selecciono "a", "b", "c" en la casilla de verificación, necesito eliminarlo de la matriz,
Puedes probar como el código a continuación. Al hacer un bucle en la matriz List, verifique si la identificación del elemento está presente en la matriz checkNameID usando indexof. Si está presente, agregue el índice de ese elemento en una matriz definida fuera del bucle. Luego puede cortarlo usando otro bucle de la matriz. Cuando corte, use 1 como segundo parámetro, eliminará 1 elemento a la vez en el bucle.
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); } },Si te entendí correctamente, prueba algo como el siguiente fragmento:
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>