En la lección de hoy aprenderemos sobre la directiva v-for de Vue.js, la cual nos permite iterar de forma dinámica un array de datos y mostrarlos en nuestra vista de forma reactiva.

Suscríbete a nuestro boletín

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

Notas

Podemos iterar sobre arrays de datos en nuestro objeto VM y mostrar sus valores en nuestro HTML usando la directiva v-for:

Usamos la directiva v-for especificando un alias (en nuestro caso task), la palabra clave in y nuestro array (tasks). Luego dentro de una etiqueta (en nuestro ejemplo <li>) podemos mostrar los valores de nuestro array.

Vue también nos permite usar of al iterar sobre un array, esto dará el mismo resultado que usar in.

Si trabajas con PHP debes tener cuidado de no confundir el uso de esta directiva con foreach(), ya que foreach() acepta primero el nombre de nuestro array y luego el alias.

En caso de que queramos obtener los indices de nuestra iteración, lo podemos hacer pasando el indice como argumento a v-for (en este caso index):

No estamos obligados a usar ningún alias en concreto, dentro de v-for podemos asignar los alias que nosotros queramos:

Al realizar una iteración podemos mostar multiples elementos HTML usando la directiva v-for en conjunto con la etiqueta <template>.

Vue.js también nos permtie iterar sobre un array de objetos:

Luego en nuestro HTML, haciendo uso de v-for, podemos acceder a las propiedades de nuestro objeto:

Podemos hacer uso de las directivas v-for y v-if en conjunto.

En nuestro ejemplo solo se imprimirán las tareas donde la propiedad pending sea verdadera.

v-for toma precedencia sobre la directiva v-if. En nuestro ejemplo Vue primero itera sobre nuestro array tasks y luego decidimos si mostrar o no la tarea dependiendo del valor de task.pending.

También podemos iterar en base a un listado de números, por ejemplo, si quisieramos imprimir los números del 1 al 10 lo podemos hacer de la siguiente forma:

Vue.js también nos permite iterar sobre las propiedades de un objeto:

Luego con el uso de v-for podemos mostrar las propiedades de nuestro objeto:

También podemos imprimir el nombre de las propiedades de nuestro objeto, de forma similiar a como imprimimos los indices:

Si quisieramos obtener el indice, lo podemos lograr pasando un tercer argumento a v-for.

Es importante tener en cuenta que el orden con el cual se van a iterar las propiedades de nuestros objetos al hacer uso de la directiva v-for depende de cada navegador y no de Vue.

Únete a la discusión

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

Lección anterior Estilos y clases de CSS dinámicas con la directiva v-bind en Vue 2 Lección siguiente Manejo de eventos en Vue.js 2