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).

Suscríbete a nuestro boletín

Te enviaremos publicaciones con consejos útiles y múltiples recursos para que sigas aprendiendo.

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:

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:

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().

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:

El método filter crea un nuevo Array con todos los elementos que cumplan la condición dada en la función callback.

Únete a la discusión

Regístrate en Styde y obtén una invitación a nuestro Slack.

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