Hoy vamos a crear una lista de tareas simple, pero a la vez, vamos a tocar muchas cosas de Vue.js. Será una lista de tareas en la que podremos añadir tareas introduciendo el texto en el input y presionando enter y automáticamente se añadirá a la lista, podremos marcarlas como completas y se tacharán y también podremos eliminarlas.
Mostrar lista de tareas (v-for)
Como ya he dicho, en esta entrada, vamos a tratar muchas cosas de Vue.js. Primero de todo vamos a crear la instancia de Vue.js, con una propiedad en el objeto data llamada tasks con un array de objetos de tareas y también añadimos otro propiedad (newTask) que utilizaremos después cuando añadamos la parte de añadir tareas a la lista:
|
1 2 3 4 5 6 7 8 9 10 |
new Vue({ el: '#app', data: { newTask: '', tasks: [ { title: 'Tarea 1', done: false}, { title: 'Tarea 2', done: true} ] } }); |
Ahora vamos a mostrar estas tareas en el HTML:
|
1 2 3 4 5 6 7 |
<div id="app"> <ul id="list-tasks"> <li v-for="task in tasks"> <span>{{ task.title }}</span> </li> </ul> </div> |
Es un simple bucle por las tareas del array tasks y muestra el título.
Abre el HTML en el navegador y verás ésto:
Añadir tarea a la lista (eventos, v-model y métodos)
Para poder añadir una tarea, tenemos que poner un input:
|
1 2 3 4 |
<div id="app"> <input type="text" placeholder='New task' v-model='newTask' @keyup.enter='addNewTask'> ... </div> |
Es un input normal que tiene dos atributos de Vue.js:
- v-model: lo que hace es relacionar lo que pongamos en el input con la propiedad newTask del objeto data de Vue.js.
- @keyup.enter: lo que hace es ejecutar el método addNewTask (que vamos a añadir ahora) de la instancia de Vue.js cuando presionamos enter. Hay muchísimos tipos de eventos y varias formas de ponerlos, lo puedes ver aquí.
Ahora vamos a añadir el método addNewTask a la instancia de Vue.js. Este método lo que hará será crear un objeto con title igual a la propiedad newTask y done igual a false, añadirlo al array de tasks y vaciar newTask.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
new Vue({ ... methods: { addNewTask: function() { var newTaskObj = { title: this.newTask, done: false } this.tasks.push(newTaskObj); this.newTask = ''; } }); |
Con esto veremos algo así:
Marcar tarea como hecha (v-model y v-bind)
Vamos a añadir un checkbox para poder marcar las tareas como hechas y también añadiremos que las que estén marcadas como hechas, salgan tachadas.
Añadimos el checkbox y se asocia a la propiedad done de las tareas (v-model). Entonces, cuando sea true saldrá marcado.
|
1 2 3 4 5 6 7 8 |
<div id="app"> <ul id="list-tasks"> <li v-for="task in tasks"> <input type="checkbox" v-model='task.done'> ... </li> </ul> </div> |
Con ésto, ya tenemos el checkbox que cambia el estado de la propiedad done. Ahora vamos a aprovechar este valor y vamos a hacer que las que estén marcadas como hechas salgan tachadas:
|
1 2 3 |
... <span v-bind:class="{'task-done' : task.done}">{{ task.title }}</span> ... |
Tenemos que añadir el atributo v-bind:class al span que muestra el título de la tarea y lo que hace este atributo es coger la propiedad done de cada tarea y si es true añade la clase CSS task-done que tendrá este contenido:
|
1 2 3 |
.task-done { text-decoration:line-through; } |
Y veremos esto:
Eliminar tareas (v-on y métodos)
Vamos a añadir la posibilidad de eliminar tareas, para ello vamos a añadir un botón al lado del título de la tarea:
|
1 2 3 |
... <button v-on:click='removeTask(task)'>x</button> ... |
Cuando le haces click se ejecuta el método removeTask con el objeto de la tarea que quieres eliminar.
Vamos a crear el método removeTask:
|
1 2 3 4 5 6 7 8 9 |
... methods: { ... removeTask: function(task) { var index = this.tasks.indexOf(task); this.tasks.splice(index, 1); } } ... |
Lo que hace es eliminar la tarea del array.
Mostrar mensaje cuando no hay tareas (v-show)
Para mostrar un mensaje del tipo «No hay tareas» o cualquier otro avisando al usuario de que no hay tareas en la lista tendremos que añadir este código después del input de inserción:
|
1 2 3 |
... <p v-show='!tasks.length'>No tasks!</p> ... |
Lo que hace es mostrar el mensaje si el tamaño del array tasks es 0. También se podría hacer con un v-if, en vez de v-show. Las difrencias entre v-if y v-show las puedes encontrar aquí.
Y finalmente, el resultado final sería:
See the Pen Vue.js 2 #2 by vreaxe (@vreaxe) on CodePen.
-
– Documentación v-for: https://vuejs.org/v2/guide/list.html
– Documentación v-if, v-show… (condicionales): https://vuejs.org/v2/guide/conditional.html
– Documentación eventos: https://vuejs.org/v2/guide/events.html
– Documentación v-bind: https://vuejs.org/v2/guide/class-and-style.html
Si hay cualquier tipo de error en el post o te surge cualquier duda, no dudes en ponerlo en los comentarios o enviarme un correo desde la página de contacto.
CONTACTAR