Vue 3-tutorial: lijsten renderen met v-for en :key
geverifieerd op 2 september 2026 · 3 min
v-for="item in items" herhaalt een element voor elke entry van een array. Zet er altijd een unieke en stabiele :key bij, afgeleid uit je data en niet uit de index, zodat Vue elk element bij een update correct blijft volgen.
Een productpagina toont lijsten: de samenstelling van de stof, de kleurvarianten, de reviews. De directive v-for herhaalt een stuk template voor elke entry van een array.
Over een eenvoudige array loopen
Zet de samenstelling van het product in de state:
<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>En toon haar:
<ul>
<li v-for="detail in details" :key="detail">{{ detail }}</li>
</ul>Vue maakt één <li> per entry. In de expressie detail in details is details de array en detail de alias van het huidige element, overal binnen het herhaalde element beschikbaar.
Over objecten loopen
De varianten van het product zijn objecten, met een id en een kleur:
<script setup>
const variants = ref([
{ id: 2234, color: 'Bleu' },
{ id: 2235, color: 'Rouge' }
])
</script>De properties bereik je met de puntnotatie:
<div v-for="variant in variants" :key="variant.id">{{ variant.color }}</div>De index
Een tweede parameter geeft de positie in de array, geteld vanaf nul:
<li v-for="(detail, index) in details" :key="detail">
{{ index + 1 }}. {{ detail }}
</li>Hoofdstuk 7 gebruikt die index om te bepalen over welke variant de muis zweeft.
Het attribuut key
De :key op elke loop is je vast opgevallen. Dat is de korte schrijfwijze van v-bind:key uit hoofdstuk 2, en hij is niet decoratief.
Zodra de lijst verandert, vergelijkt Vue de oude en de nieuwe versie om alleen het noodzakelijke aan te passen. Zonder stabiele identifier koppelt het de elementen op positie: zet je er een entry vooraan bij, dan concludeert Vue dat alle elementen andere inhoud hebben gekregen en schrijft het ze allemaal opnieuw.
Met een unieke en stabiele key herkent Vue elk element en verplaatst het alleen wat verschoven is. Dat voorkomt ook een klassieke bug: een invoerveld of een aangevinkt vakje dat na een sortering aan het verkeerde element blijft hangen.
Drie regels voor de key:
- Uniek binnen de lijst.
- Stabiel: dezelfde entry houdt van render tot render dezelfde key.
- Niet de index, tenzij de lijst nooit verandert. De index schuift op bij invoegen, verwijderen en sorteren: precies de momenten waarop je er niet op moet vertrouwen.
Gebruik de identifier uit je data. Hier is dat variant.id voor de varianten, en de string zelf voor de details, omdat die uniek zijn.
Sinds Vue 3 wordt v-if vóór v-for geëvalueerd. De loopvariabele bestaat op dat moment nog niet en Vue gooit een fout van het type variant is not defined. Filter de lijst in een computed property, of verplaats de loop naar een <template> eromheen.
<!-- 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>Over iets anders dan een array loopen
v-for accepteert ook een object, een string of een geheel getal:
<!-- 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>In het template verandert er niets. Alleen de declaratie van de array is anders: data() { return { details: [...] } } in plaats van const details = ref([...]).
v-for. Voeg daarna een derde kleurvariant aan de array toe en controleer dat die verschijnt zonder verdere aanpassing.