<script> import { datalist } from "./datalist"; export default { name: "HelloWorld", components: {}, data() { return { items: datalist, }; }, methods: { deleteEvent(id) { this.items = this.items.filter((e) => e.id !== id); }, }, }; </script> My data... export const datalist = [ { id: 1, val: "11", kk: "potter" }, { id: 2, val: "22", kk: "james" }, { id: 3, val: "55", kk: "limda" }, { id: 4, val: "77", kk: "stepen" } ]; <div> <div v-for="item in items" :key="item.id"> <b>{{ item.id }}.</b> <router-link :to="{ name: 'UserWithID', params: { id: item.id } }"> {{ item.kk }} </router-link> <input type="checkbox" :value="item.id" /> <button @click="deleteEvent(item.id)">Delete</button> </div> </div>Mi código completo;- https://codesandbox.io/s/wild-flower-rssg0?file=/src/components/datalist.js
Quiero eliminar el elemento de la matriz, cuando el usuario haga clic en la casilla de verificación junto a cada elemento. y luego haga clic en el botón Eliminar, luego se debe eliminar el registro del elemento de matriz.
Pero ahora obtengo, directamente si hago clic en el botón Eliminar, puedo eliminar la matriz. Pero eso debería suceder solo después de hacer clic en la casilla de verificación y luego en el botón Eliminar.
Para este proceso, tomé el evento de clic en el botón y agregué un método para eliminar el registro de la matriz, pero no funciona... ¿Pueden ayudarme, por favor, qué es lo que está mal con el código?...
Debe mantener una matriz de elementos para eliminar. Vincule la casilla de verificación a esta matriz para que, si la casilla de verificación está marcada, el ID del elemento se agregue a esta matriz. Luego, simplemente agregue un botón de eliminación en algún lugar para eliminar todos los elementos seleccionados.
Ver ejemplo aquí: https://codesandbox.io/s/elated-lake-ws2wn