Otra de las funcionalidades esenciales de Vue.js es la posibilidad de mapear o imprimir arrays de elementos con la directiva v-for y mostrarlo en forma de listas.
La directiva v-for requiere de una sintaxis específica para recorrer un array «item in items«, lo que viene a ser «cada elemento del conjunto de elementos».
¿Cómo mostramos un listado en el DOM de HTML?, pues con algún listado ul al que le podemos aplicar a la etiqueta li la directiva v-for junto con esta sintaxis especial:
<div id="app"> <ul> <li v-for="name in names">{{ name }}</li> </ul> </div>
var app = new Vue({ el: "#app", data: { names: ["John", "Mary", "Lukasz", "Aneta"] }, });
Dentro de nuestro data tenemos un array llamado «names» con un conjunto de nombres. Este conjunto se recorre e imprime por pantalla cada elemento en forma de listado.
La directiva v-for es capaz de aceptar también un segundo argumento para mostrar el índice de los elementos padre.
<div id="app"> <ul> <li v-for="(name, index) in names">{{ index }} - {{ name }}</li> </ul> </div>
V-for para objetos
Supongamos que tenemos un objeto dentro de nuestro data con una serie de propiedades. Un objeto «persona» que tiene «nombre», «apellidos» y «edad». Con v-for podemos también iterar entre cada uno de las propiedades de un objeto.
var app = new Vue({ el: "#app", data: { person: { firstname: "John", lastname: "Doe", age: "29" } } });
<div id="app"> <ul> <li v-for="value in person">{{ value }}</li> </ul> </div>
Si también queremos mostrar la propiedad del objeto, podemos agregar como segundo argumento una key que imprima el nombre de cada propiedad:
<div id="app"> <ul> <li v-for="(value, key) in person">{{ key }}: {{ value }}</li> </ul> </div>
Métodos mutadores
Vue proporciona métodos manipulares de listas con los que agregar, eliminar, ordenar, etc. Estos métodos son:
- pop()
- push()
- sort()
- Shift()
- unshift()
- splice()
- reverse()
Y hasta aquí se ha aprendido de manera muy básica a manipular listas en Vue.js, donde gracias a la direcvita v-for se nos permite recorrer listados de elementos.