0
241
Vistascómo eliminar una fila con v-for
para eso estoy llenando con un push y también agregando un índice a cada fila, lo que necesito es borrar la fila.
addTrabajo(state) { state.trabajos.push({ vehicle_id: state.newOrdenTrabajo.vehicle_id, km: state.newOrdenTrabajo.km, descripcion: state.newOrdenTrabajo.descripcion, }) }, 
OrdenTrabajo.vue
<table class="table table-hover table-striped mt-3 table-sm text-white bg-dark"> <thead> <tr> <th>#</th> <th>Trabajo</th> <th></th> </tr> </thead> <tbody> <tr v-for="(trabajo, index) in trabajos" :key="index"> <td>{{index + 1}}</td> <td>{{ trabajo.descripcion }}</td> <td> <a href="#" class="btn btn-danger btn-sm" @click.prevent="removeFromTrabajo({ id: index + 1 })" data-toggle="tooltip" data-placement="top" title="Eliminar"> <i class="fas fa-ban"></i> </a> </td> </tr> </tbody> </table>guión.js
removeFromTrabajo(state, data) { let found = state.trabajos.indexOf(data.id) state.trabajos.splice(found) },El problema es que al eliminar se elimina el último aunque no sea el seleccionado. Por ejemplo: selecciono el primero, pero el último se está eliminando.
2 Respuestas
Responde la pregunta0
Solo necesita pasar el index a la función. En removeFromTrabajo puede acceder directamente a la lista usando this.trabajos , verificar si el elemento existe y luego usar Array#splice para eliminar el elemento en este índice pasando un segundo parámetro:
deleteCount (Opcional) : : Un entero que indica el número de elementos en la matriz para eliminar desde el principio. Si se omite deleteCount , o si su valor es igual o mayor que array.length - start (es decir, si es igual o mayor que el número de elementos que quedan en la matriz, comenzando por start), entonces todos los elementos desde el principio hasta el final de la matriz se eliminará . Si deleteCount es 0 o negativo, no se elimina ningún elemento.
new Vue({ el: "#table", data: () => ({ trabajos: [ { descripcion: '1' }, { descripcion: '2' }, { descripcion: '3' } ] }), methods: { removeFromTrabajo(index) { const item = this.trabajos[index]; if(item) { this.trabajos.splice(index, 1); } } } }); <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <script src="https://kit.fontawesome.com/a076d05399.js"></script> <table id="table" class="table table-hover table-striped mt-3 table-sm text-white bg-dark"> <thead> <tr><th>#</th> <th>Trabajo</th><th></th></tr> </thead> <tbody> <tr v-for="(trabajo, index) in trabajos" :key="index"> <td>{{index + 1}}</td> <td>{{ trabajo.descripcion }}</td> <td> <a href="#" class="btn btn-danger btn-sm" @click.prevent="removeFromTrabajo(index)" data-toggle="tooltip" data-placement="top" title="Eliminar"> <i class="fas fa-ban"></i> </a> </td> </tr> </tbody> </table>0
Estás pasando solo id en un objeto, es decir
removeFromTrabajo({ id: index + 1 }) Demostración en vivo usando filter
Por lo tanto, debe recibir un solo argumento con una id y debe eliminarlo como:
removeFromTrabajo(data) { console.log(this.trabajos); this.trabajos = this.trabajos.filter((o, index) => data.id !== index + 1); },