Renderizado de listas en Vue.js
Hace algunos días vimos el rederizado condicional en Vue.js con la directiva v-if. El día de hoy veremos otra directiva muy útil en cuanto al renderizado de listas HTML y es la directiva v-for. Esta directiva permite iterar un array o un objeto para mostrar cada una de sus características.
Directiva v-for
Para utilizar la directiva v-for basta utilizar la siguiente sintaxis en los atributos de un elemento HTML.
v-for="item in items"
En donde items será un array u objeto e item el valor de cada uno de sus elementos.
Iteración sobre Arrays
Supongamos que tenemos un array de monedas y un array de países y queremos listarlos en el HTML. Lo primero que debemos tener en cuenta es la definición de dichos arrays como te muestro a continuación.
var vue = new Vue({
el: "#app",
data: {
currencies: ["USD", "COP", "AUD"],
countries: ["USA", "COL", "AUS"]
}
});
La siguiente tarea será iterar sobre estos arrays mediante la directiva v-for en el html.
<div id="app">
<ul>
<li v-for="currency in currencies">
{{ '\{\{ currency \}\}' }}
</li>
</ul>
<ul>
<li v-for="(country, index) in countries">
{{ '\{\{ index + \' - \' + country \}\}' }}
</li>
</ul>
</div>
Nota que en el segundo caso hemos iterado de una forma alternativa para obtener el índice del array.
v-for="(value, index) in array"
Observa el ejemplo en funcionamiento en el siguiente ejemplo de CodePen.
Iteración sobre Objetos
La iteración con objetos es muy similar a la iteración con arrays exceptuando algunas leves diferencias. Supongamos que queremos mostrar las skills de un usuario y algunos de sus datos básicos. Vemos la definición de datos.
var vue = new Vue({
el: "#app",
data: {
skills: {
backend: "PHP",
backendFramework: "Laravel",
},
user: {
name: "Steave",
position: "Web Developer",
}
}
});
Como en el ejemplo anterior la siguiente tarea será utilizar la directiva v-for en el HTML.
<div id="app">
<h3>Skills</h3>
<ul>
<li v-for="skill in skills">
{{ '\{\{ skill \}\}' }}
</li>
</ul>
<h3>Info</h3>
<div v-for="(value, name) in user">
<strong>{{ '\{\{ name \}\}' }}</strong>: {{ '\{\{ value \}\}' }}
</div>
</div>
Nota que en el segundo ejemplo hemos iterado de tal forma que podamos obtener el nombre de la propiedad y su respectivo valor en el objeto. También es posible acceder a la key cambiando un poco la sintaxis así.
v-for="(value, name, index) in object"
Veamos el ejemplo en funcionamiento desde CodePen.