Soy nuevo en vue.js (2) y actualmente estoy trabajando en una aplicación de eventos simple. Logré agregar eventos, pero ahora me gustaría eliminar eventos al hacer clic en un botón.
HTML
<div class="list-group"> <div class="list-group-item" v-for="event in events"> <h4 class="list-group-item-heading"> {{ event.name }} </h4> <h5> {{ event.date }} </h5> <p class="list-group-item-text" v-if="event.description">{{ event.description }}</p> <button class="btn btn-xs btn-danger" @click="deleteEvent(event)">Delete</button> </div> </div> </div>JS(Ver)
new Vue ({ el: '#app', data: { events: [ { id: 1, name: 'Event 1', description: 'Just some lorem ipsum', date: '2015-09-10' }, { id: 2, name: 'Event 2', description: 'Just another lorem ipsum', date: '2015-10-02' } ], event: { name: '', description: '', date: '' } }, ready: function() { }, methods: { deleteEvent: function(event) { this.events.splice(this.event); }, // Adds an event to the existing events array addEvent: function() { if(this.event.name) { this.events.push(this.event); this.event = { name: '', description: '', date: '' }; } } } // end of methods });Intenté pasar el evento a la función y luego eliminarlo con la función de división, pensé que era ese código para eliminar algunos datos de la matriz. ¿Cuál es la mejor forma más limpia de eliminar datos de la matriz con un botón simpleb y un evento onclick?
Estás usando el splice de manera incorrecta.
Las sobrecargas son:
arreglo.empalme(comienzo)
array.splice(inicio, eliminarContador)
array.splice(inicio, deleteCount, itemForInsertAfterDeletion1, itemForInsertAfterDeletion2, ...)
Inicio significa el índice que desea iniciar, no el elemento que desea eliminar. Y debe pasar el segundo parámetro deleteCount como 1, lo que significa: "Quiero eliminar 1 elemento que comienza en el índice {inicio}".
Así que mejor ve con:
deleteEvent: function(event) { this.events.splice(this.events.indexOf(event), 1); } Además, está utilizando un parámetro, por lo que accede directamente, no con this.event .
Pero de esta manera, buscará indexOf innecesario en cada eliminación, para resolver esto, puede definir la variable de index en su v-for y luego pasarla en lugar del objeto de evento.
Es decir:
v-for="(event, index) in events" ... <button ... @click="deleteEvent(index)"Y:
deleteEvent: function(index) { this.events.splice(index, 1); }También puede usar .$delete:
remove (index) { this.$delete(this.finds, index) }fuentes:
No olvide vincular el atributo clave ; de lo contrario, siempre se eliminará el último elemento
Forma correcta de eliminar el elemento seleccionado de la matriz:
Modelo
<div v-for="(item, index) in items" :key="item.id"> <input v-model="item.value"> <button @click="deleteItem(index)"> delete </button>texto
deleteItem(index) { this.items.splice(index, 1); \\OR this.$delete(this.items,index) \\both will do the same }