En esta lección añadiremos las funciones para marcar tareas pendientes como completadas (y viceversa) y para editar la descripción de una tarea a través de un formulario. Además aprenderemos cómo crear un borrador de la tarea que nos permitirá confirmar o cancelar la actualización.
Notas
Para añadir funcionalidad de «checkbox» a los iconos que tenemos junto a las tareas usamos la directiva v-on con el evento click; sin embargo en este caso usamos la forma corta @click. Al evento @click le pasamos el método que queremos llamar, en este caso toggleStatus. A su vez a toggleStatus le pasamos la tarea cuyo status queremos alterar:
<a @click="toggleStatus(task)">...</a>
En nuestro objeto VM creamos nuestro método toggleStatus y dentro de este vamos a cambiar el estado de la tarea. Si la tarea se encuentra pendiente cambia a completado y viceversa.
...
toggleStatus: function (task) {
task.pending = !task.pending;
}
Creamos el método editTask para cambiar el estado de edición. Prevenimos que se puedan editar multiples tareas a la vez recorriendo cada tarea con un forEach y cambiando el estado de cada una con task.editing. También guardamos el contenido de la tarea como un borrador en la variable draft, esto nos permitirá poder actualizar el contenido de la tarea a futuro:
...
editTask: function (task) {
this.tasks.forEach(function (task) {
task.editing = false;
});
this.draft = task.description;
task.editing = true;
}
El método forEach nos permite ejecutar la función dada para cada uno de los elementos dentro de un array. Esta función va a recibir como primer argumento el elemento actual siendo procesado (en nuestro ejemplo una «tarea»), luego como segundo argumento el indice del item y como tercer argumento la referencia al array completo que se está recorriendo:
arr.forEach(function callback(currentValue, index, array) {
//your iterator
});
Al cambiar el estado de edición tenemos dos iconos, uno para guardar los cambios y otro para descartarlos. Creamos dos métodos, updateTask y discardTask, desde donde manejamos la funcionalidad de estos iconos.
En updateTask cambiamos el estado de edición nuevamente a false, no sin antes actualizar el contenido de la tarea:
updateTask: function (task) {
task.description = this.draft;
task.editing = false;
}
Mientras que en discardTask solamente cambiamos el estado de edición a false:
discardTask: function (task) {
task.editing = false;
}
Regístrate hoy en Styde y obtén acceso a todo nuestro contenido.
Lección anterior Creación de registros a través de formularios con Vue.js 2 Lección siguiente Eliminar registros de un listado con Vue.js 2