Vue.js 2 #2 : Lista de tareas con v-if, v-show, v-for, v-model, métodos y más

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:

Ahora vamos a mostrar estas tareas en el HTML:

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:

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.

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.

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:

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:

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:

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:

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:

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-forhttps://vuejs.org/v2/guide/list.html

– Documentación v-if, v-show… (condicionales): https://vuejs.org/v2/guide/conditional.html

– Documentación eventoshttps://vuejs.org/v2/guide/events.html

– Documentación v-bindhttps://vuejs.org/v2/guide/class-and-style.html


Aloja tu proyecto en DigitalOcean: Obtén $200 de crédito gratis al registrarte a través de este enlace.

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

Deja una respuesta

  Acepto la política de privacidad