Vue 3 Tutorial: Listen mit v-for rendern und :key setzen

Eine Produktseite zeigt Listen: die Zusammensetzung des Stoffs, die Farbvarianten, die Bewertungen. Die Direktive v-for wiederholt ein Element des Templates für jeden Eintrag eines Arrays.

Über ein einfaches Array iterieren

Nimm die Zusammensetzung des Produkts in den State auf:

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

Und gib sie aus:

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

Vue erzeugt ein <li> pro Eintrag. Im Ausdruck detail in details ist details das Array und detail der Alias des aktuellen Elements, der überall im wiederholten Element zur Verfügung steht.

Über Objekte iterieren

Die Varianten des Produkts sind Objekte mit einer ID und einer Farbe:

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

Auf die Eigenschaften greifst du über die Punktnotation zu:

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

Der Index

Ein zweiter Parameter liefert die Position im Array, beginnend bei null:

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

Kapitel 7 nutzt diesen Index, um zu wissen, über welcher Variante die Maus steht.

Das Attribut key

Dir ist das :key an jeder Schleife aufgefallen. Es ist die Kurzform von v-bind:key aus Kapitel 2, und es ist keine Zierde.

Wenn sich die Liste ändert, vergleicht Vue die alte mit der neuen Fassung, um nur das Nötige anzufassen. Ohne stabile ID ordnet es die Elemente über ihre Position zu: Fügst du einen Eintrag am Anfang der Liste ein, hält es alle Elemente für inhaltlich verändert und schreibt sie alle neu.

Mit einem eindeutigen und stabilen key erkennt Vue jedes Element wieder und verschiebt nur das, was sich bewegt hat. Das verhindert außerdem einen klassischen Bug: ein Eingabefeld oder eine angehakte Checkbox, die nach einer Sortierung am falschen Element hängen bleibt.

Drei Regeln für den Key:

• Eindeutig innerhalb der Liste.
• Stabil: Derselbe Eintrag behält von einem Rendering zum nächsten denselben Key.
• Nicht der Index, außer die Liste ändert sich nie. Der Index verschiebt sich beim Einfügen, Löschen und Sortieren, genau dort darfst du dich nicht auf ihn verlassen.

Nimm die ID aus deinen Daten. Hier variant.id für die Varianten und den String selbst für die Details, weil sie eindeutig sind.

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

Über etwas anderes als ein Array iterieren

v-for nimmt auch ein Objekt, einen String oder eine ganze Zahl entgegen:

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