Tutorial VueJS 3 – Renderizado de listas con v-for

Una ficha de producto muestra listas: la composición del tejido, las variantes de color, las opiniones. La directiva v-for repite un elemento de la plantilla por cada entrada de un array.

Recorrer un array simple

Añade la composición del producto al estado:

<script setup>
import { ref } from 'vue'

const product = ref('T-Shirt')
const image = ref('/images/t-shirt-bleu.svg')
const inventory = ref(100)
const details = ref(['60 % coton', '30 % laine', '10 % polyester'])
</script>

Y después muéstrala:

<ul>
  <li v-for="detail in details" :key="detail">{{ detail }}</li>
</ul>

Vue produce un <li> por entrada. En la expresión detail in details, details es el array y detail el alias del elemento actual, disponible en todo el elemento repetido.

Recorrer objetos

Las variantes del producto son objetos, con un identificador y un color:

<script setup>
const variants = ref([
  { id: 2234, color: 'Bleu' },
  { id: 2235, color: 'Rouge' }
])
</script>

A las propiedades se accede con la notación de punto:

<div v-for="variant in variants" :key="variant.id">{{ variant.color }}</div>

El índice

Un segundo parámetro da la posición dentro del array, empezando en cero:

<li v-for="(detail, index) in details" :key="detail">
  {{ index + 1 }}. {{ detail }}
</li>

El capítulo 7 usará ese índice para saber sobre qué variante está el cursor.

El atributo key

Habrás visto el :key en cada bucle. Es el atajo de v-bind:key que vimos en el capítulo 2, y no está ahí de adorno.

Cuando la lista cambia, Vue compara la versión antigua con la nueva para modificar solo lo necesario. Sin un identificador estable, empareja los elementos por posición: si insertas una entrada al principio de la lista, da por hecho que todos los elementos han cambiado de contenido y los reescribe todos.

Con una key única y estable, reconoce cada elemento y se limita a mover lo que se ha movido. Eso evita además un fallo clásico: un campo de texto o una casilla marcada que se queda pegada al elemento equivocado después de ordenar la lista.

Tres reglas para la clave:

• Única dentro de la lista.
• Estable: la misma entrada conserva la misma clave de un renderizado al siguiente.
• Nunca el índice, salvo que la lista no cambie jamás. El índice cambia al insertar, al borrar y al ordenar: justo cuando no conviene fiarse de él.

Usa el identificador de tus datos. Aquí, variant.id para las variantes, y la propia cadena para los detalles, ya que son únicas.

<!-- ne fonctionne pas -->
<div v-for="variant in variants" v-if="variant.enStock">…</div>

<!-- fonctionne -->
<template v-for="variant in variants" :key="variant.id">
  <div v-if="variant.enStock">…</div>
</template>

Recorrer algo que no sea un array

v-for también acepta un objeto, una cadena o un número entero:

<!-- objet : valeur, clé, index -->
<li v-for="(valeur, cle) in produit" :key="cle">{{ cle }} : {{ valeur }}</li>

<!-- nombre : de 1 à 5, pas de 0 à 4 -->
<span v-for="n in 5" :key="n">{{ n }}</span>