Tutorial Vue 3: rendering di liste con v-for e :key

Una scheda prodotto è piena di liste: la composizione del tessuto, le varianti di colore, le recensioni. La direttiva v-for ripete un elemento del template per ogni voce di un array.

Ciclare su un array semplice

Aggiungi allo stato la composizione del prodotto:

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

Poi mostrala:

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

Vue produce un <li> per ogni voce. Nell’espressione detail in details, details è l’array e detail l’alias dell’elemento corrente, disponibile ovunque dentro l’elemento ripetuto.

Ciclare su oggetti

Le varianti del prodotto sono oggetti, con un identificatore e un colore:

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

Alle proprietà si accede con la notazione a punto:

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

L’indice

Un secondo parametro dà la posizione nell’array, a partire da zero:

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

Il capitolo 7 userà questo indice per sapere su quale variante si trova il cursore.

L’attributo key

Avrai notato il :key su ogni ciclo. È la scorciatoia di v-bind:key vista al capitolo 2, e non è lì per decorazione.

Quando la lista cambia, Vue confronta la vecchia e la nuova versione per modificare solo il necessario. Senza un identificatore stabile, accoppia gli elementi per posizione: se inserisci una voce in cima alla lista, considera che tutti gli elementi hanno cambiato contenuto e li riscrive uno per uno.

Con una key unica e stabile riconosce ogni elemento e si limita a spostare quello che si è mosso. Questo evita anche un bug classico: un campo di testo o una casella spuntata che resta agganciata all’elemento sbagliato dopo un ordinamento.

Tre regole per la chiave:

• Unica nella lista.
• Stabile: la stessa voce mantiene la stessa chiave da un rendering all’altro.
• Mai l’indice, a meno che la lista non cambi mai. L’indice si sposta a ogni inserimento, eliminazione o ordinamento: ed è proprio lì che non ci si può fidare.

Usa l’identificatore dei tuoi dati. Qui, variant.id per le varianti, e la stringa stessa per i dettagli, visto che sono uniche.

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

Ciclare su qualcosa che non è un array

v-for accetta anche un oggetto, una stringa o un numero intero:

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