En esta lección del Curso de Vue.js 2 realizaremos el desarrollo de la funcionalidad faltante en nuestro pequeño módulo de CRUD: que es la de eliminar registros. Así que vamos a aprender cómo podemos eliminar registros de forma individual del listado o en lote basados en una condición (en nuestro ejemplo usaremos el estatus de la tarea).
Notas
En lecciones anteriores del curso de Vue.js 2 vimos cómo pasar el índice de un elemento con v-for. En esta lección haremos uso nuevamente de dicho feature:
<ul class="list-group tasks">
<li v-for="(task, index) in tasks">...</li>
...
</ul>
Repasa la lección sobre listado de elementos con v-for
Una vez más hicimos uso de la directiva v-on y el evento «click» con @click. En esta ocasión para enlazar el método deleteTasks a nuestro icono de papelera. Esto nos permite eliminar tareas de nuestra lista:
<a @click="deleteTask(index)">
<span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
</a>
Repasa la lección sobre manejo de eventos en Vue.js
En nuestro objeto VM creamos el método deleteTask. Este método recibe el índice de nuestra tarea, y haciendo uso de este índice eliminamos la tarea del listado mediante el método splice().
deleteTask: function (index) {
this.tasks.splice(index, 1);
}
El método splice() de JavaScript nos permite modificar el contenido de un Array, ya sea agregando nuevos elementos o eliminando elementos ya existentes.
Creamos un método llamado deleteCompleted que nos permitirá eliminar todas las tareas que ya se encuentran completadas. Haciendo uso del método filter sobre-escribimos nuestra lista de tareas (this.tasks), retornando solamente las tareas que todavía están pendientes:
deleteCompleted: function () {
this.tasks = this.tasks.filter(function (task) {
return task.pending;
});
}
El método filter crea un nuevo Array con todos los elementos que cumplan la condición dada en la función callback.
Regístrate hoy en Styde y obtén acceso a todo nuestro contenido.
Lección anterior Actualización de registros con Vue.js 2 Lección siguiente Creación y uso de tu primer componente con Vue.js 2