Intro
En esta ocasión vamos a ver como vincular y renderizar una lista HTML desde un array de datos de nuestro data(). La pregunta es: ¿cómo mostramos ese array como una lista HTML?
[js title=»app.js» highlight=»5″]
const app = Vue.createApp({
data() {
return {
…
games: [‘Grand Turismo’, ‘FIFA’, ‘GTA’]
}
}
})
[/js]
Recorrer Array de Datos (v-for)
Vamos a empezar creando una lista desordenada en nuestro index.html. En la etiqueta li es donde vamos a añadir otra directiva de Vue: v-for
[html title=»index.html»]
<ul>
<li v-for="game in games">{{ game }}</li>
</ul>
[/html]
Dentro de la expresión Cada Si comprobamos nuestra App en el navegador veremos la lista de juegos renderizada correctamente.v-for escribimos game in games. Aquí, games nos referimos al array en nuestro data() y game es un alias para el elemento actual del array en el que nos encontramos, mientras lo recorremos para imprimir un nuevo li.
li mostrará cada elemento del array porque dentro escribimos la expresión: {{ game }} que imprime cada juego.
Pero, ¿como funciona la directiva v-for?
Recorrer array de objetos (v-for)
Vamos a completar nuestro array con objetos en lugar de solo nombres:
[js title=»app.js» highlight=»5″]
const app = Vue.createApp({
data() {
return {
…
games: [
{
id: 1,
name: "Grand Turismo",
score: 87,
},
{
id: 2,
name: "FIFA",
score: 65,
},
{
id: 3,
name: "GTA",
score: 90,
}
],
}
}
})
[/js]
Ahora tenemos un array que contiene un objeto para cada uno de los games. Cada juego contiene un id, un name y un score. En la siguiente tarea, usaremos el score para imprimirlo en cada game, y el id para ayudar a Vue a realizar un seguimiento de los elementos de nuestra lista HTML.
[html title=»index.html»]
<ul>
<li v-for="game in games" :key="game.id">
{{ game.name }} – {{ game.score }}
</li>
</ul>
[/html]
Fíjate como estamos usando la «dot notation» para imprimir cada game a medida que recorremos el array de games. Pero, ¿qué hace el atributo :key?
Atributo :key Esencial en los elementos de una lista
Al añadir el atributo :key="game.id", usamos la abreviatura de v-bind para vincular el id del game al atributo :key. Esto le da a cada elemento del DOM una clave única para que Vue pueda captar el elemento y no perderlo de vista a medida que las cosas se actualizan dentro de la App.
Esto proporciona algunas mejoras de rendimiento, y más adelante, si estás haciendo algo como animar los elementos, te darás cuenta que el atributo :key ayuda a Vue a administrar de manera efectiva sus elementos a medida que se mueven por el DOM.
