Listado dinámico con Vue.js 2

En esta lección vamos entonces a comenzar con el desarrollo de nuestra pequeña aplicación CRUD con Vue: vamos a comenzar definiendo un listado de tareas de prueba en nuestro objeto VM y luego vamos a convertir nuestro HTML estático en una plantilla dinámica de Vue.js.

Notas

Recordemos que para añadir clases de CSS de forma dinámica a un elemento usamos: v-bind:class (o su versión corta :class).

<li v-for="task in tasks" class="list-group-item" :class="{editing: task.editing, completed: !task.pending}">

En este caso las clases editing y completed se añadirán o eliminarán dependiendo del valor de task.pending y task.editing.

Repasa la definición de clases y estilos de CSS de forma dinámica con Vue.js 2.

Es importante ir probando poco a poco los cambios que añadimos a nuestro código, porque así será más fácil detectar posibles errores. Si agregamos un cambio y todo deja de funcionar podremos saber que el error se encuentra en este último cambio que realizamos. Esta filosofía la hemos aprendido en el curso Crea una aplicación con Laravel 5.3 y 5.4.

En lecciones anteriores vimos la etiqueta <template> que nos permite agrupar diferentes etiquetas sin alterar el DOM. En nuestra aplicación de tareas la usamos de forma dinámica para mostrar los campos de edición o simple texto y los diferentes iconos dependiendo del estado de la tarea.

<template v-if="!task.editing">
    <span class="description">{{ task.description }}</span>
    ...
</template>
<template v-else>
    <input type="text" v-model="task.description">
    ...
</template>

Repasa el uso de la etiqueta template de Vue.js y el uso de las directivas v-if y v-else.

Podemos probar que el listado de nuestra aplicación ya es dinámico y funciona manipulando el array vm.tasks directamente desde la consola del navegador:

// Cambiamos el estado de la primera tarea a completado
vm.tasks[0].pending = false;

Puedes también (y es muy recomendado) utilizar Vue.js devtools para depurar tu aplicación de Vue, como aprendimos en la lección primeros pasos con Vue.js.

Para mejorar un poco el flujo de trabajo, en la siguiente lección usaré un archivo app.js donde estará todo el código de JavaScript y por supuesto haré referencia a dicho archivo desde index.html con <script src="app.js"></script>.

Únete a nuestra comunidad en Discord y comparte con los usuarios y autores de Styde, 100% gratis.

Únete hoy

Regístrate hoy en Styde y obtén acceso a todo nuestro contenido.