Tutoriel VueJS 3 – Rendu de liste

Une fiche produit affiche des listes : la composition du tissu, les déclinaisons de couleur, les avis. La directive v-for répète un élément du gabarit pour chaque entrée d’un tableau.

Boucler sur un tableau simple

Ajoutez la composition du produit à l’état :

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

Puis affichez-la :

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

Vue produit un <li> par entrée. Dans l’expression detail in details, details est le tableau et detail l’alias de l’élément courant, disponible partout dans l’élément répété.

Boucler sur des objets

Les déclinaisons du produit sont des objets, avec un identifiant et une couleur :

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

On accède aux propriétés par la notation pointée :

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

L’index

Un second paramètre donne la position dans le tableau, à partir de zéro :

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

Le chapitre 7 se servira de cet index pour savoir quelle déclinaison est survolée.

L’attribut key

Vous avez remarqué le :key sur chaque boucle. C’est le raccourci de v-bind:key vu au chapitre 2, et il n’est pas décoratif.

Quand la liste change, Vue compare l’ancienne et la nouvelle version pour ne modifier que le nécessaire. Sans identifiant stable, il apparie les éléments par position : si vous insérez une entrée en tête de liste, il considère que tous les éléments ont changé de contenu et les réécrit tous.

Avec une key unique et stable, il reconnaît chaque élément et se contente de déplacer ce qui a bougé. Cela évite aussi un bug classique : un champ de saisie ou une case cochée qui reste attaché au mauvais élément après un tri.

Trois règles pour la clé :

• Unique dans la liste.
• Stable : la même entrée garde la même clé d’un rendu à l’autre.
• Pas l’index, sauf si la liste ne bouge jamais. L’index change quand on insère, supprime ou trie : c’est précisément là qu’il ne faut pas s’y fier.

Utilisez l’identifiant de vos données. Ici, variant.id pour les déclinaisons, et la chaîne elle-même pour les détails puisqu’elles sont uniques.

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

Boucler sur autre chose qu’un tableau

v-for accepte aussi un objet, une chaîne, ou un nombre entier :

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