Listado de elementos con v-for en Vue 2

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.

Notas

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

// Nuestro array dentro de el objeto VM
...
data: {
    tasks: [
        'Aprender Vue.js',
        'Inscribirse en Styde',
        'Seguir a @Stydenet en Twitter'
    ]
}

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.

<ul>
    <li v-for="task in tasks">{{ task }}</li>
</ul>

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

<li v-for="task of tasks">{{ task }}</li>

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):

<li v-for="(task, index) of tasks">
    {{ index }}: {{ task }}
</li>

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

<li v-for="(tarea, indice) of tasks">
    {{ indice }}: {{ tarea }}
</li>

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

<template v-for="(tarea, indice) in tasks">
    <p>{{ indice + 1}}: {{ tarea }}</p>
    <hr>
</template>

Vue.js también nos da la posibilidad de iterar sobre un array de objetos:

// Nuestro array de objetos
...
data: {
    tasks: [
        {
            title: 'Aprender Vue.js',
            pending: false
        },
        { 
            title: 'Inscribirse en Styde',
            pending: true
        },
        ...
    ]
}

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

<li v-for="(task, indice) of tasks">
    <del v-if="!task.pending">{{ task.title }}</del>
    <template v-else>{{ task.title }}</template>
</li>

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

<li v-for="(task, indice) of tasks" v-if="task.pending">
    {{ task.title }}
</li>

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:

<li v-for="i in 10">
    {{ i }}
</li>

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

...
data: {
    user: {
        firstName: 'Duilio',
        lastName: 'Palacios',
        username: 'Silence',
        website: 'styde.net',
        description: 'vue.js teacher'
    }
}

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

<li v-for="value in user">{{ value }}</li>

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

<li v-for="(value, key) in user">{{ key }}: {{ value }}</li>

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

<li v-for="(value, key, index) in user">{{ index }}: {{ key }}: {{ value }}</li>

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 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.