Wat zijn Lists?
In Vue werk je vaak met lijstjes (arrays) van data. Om deze lijst op je scherm te tonen, gebruik je de v-for directive.
v-for = loop door array
De v-for directive loopt door elk item in je array en maakt voor elk item een stukje HTML.
Vue vs React: waar React {items.map(item => ...)} gebruikt, gebruikt Vue v-for="item in items". Hetzelfde idee, andere syntax.
Basis: Simpele Array
<script setup>
import { ref } from 'vue'
const fruits = ref(['Appel', 'Banaan', 'Sinaasappel'])
</script>
<template>
<div>
<h2>Fruit lijst:</h2>
<p v-for="fruit in fruits" :key="fruit">
{{ fruit }}
</p>
</div>
</template>Wat gebeurt er? Voor elk fruit in de array maken we een <p> tag. Als er 3 fruits zijn, krijgen we 3 paragrafen.
Klik "Run v-for" en zie het gebeuren:
De Data
Het Resultaat
Dezelfde regel: 3 strings → 3 paragrafen. Het maakt niet uit of je array strings, getallen of objecten bevat — voor elk item komt er één stukje UI uit v-for.
Waarom :key?
Vue heeft een key nodig om elk item uniek te kunnen identificeren. Dit helpt Vue om te weten welk item is veranderd, toegevoegd of verwijderd.
Console warning zonder :key:
"Elements in iteration expect to have 'v-bind:key' directives."
Waarom is dit belangrijk?
- Zonder keys moet Vue alle items opnieuw renderen (langzaam)
- Met keys kan Vue alleen de gewijzigde items updaten (snel)
- Keys helpen Vue om de juiste items te verwijderen of toe te voegen — vooral belangrijk bij animaties en form-state
Let op de :: het is altijd :key, niet key. Zonder de : wordt de naam van de variabele letterlijk als string gebruikt.
Array met Objecten (beste manier)
In de praktijk werk je meestal met arrays van objecten die een id hebben. Gebruik altijd het id als key!
<script setup>
import { ref } from 'vue'
const students = ref([
{ id: 1, name: 'Anna', role: 'Frontend' },
{ id: 2, name: 'Bram', role: 'Backend' },
{ id: 3, name: 'Chloé', role: 'Design' }
])
</script>
<template>
<div>
<h2>Studenten:</h2>
<div v-for="student in students" :key="student.id">
<p>{{ student.name }} - {{ student.role }}</p>
</div>
</div>
</template>Best Practice: Gebruik altijd het id als key wanneer je objecten hebt met een uniek id!
Dé Vue-manier: een eigen Component per item
Dit is waar het in Vue om draait: voor elk herhalend item maak je een eigen component. Niet omdat het kan — omdat het zo hoort. Componenten zijn herbruikbaar, makkelijk te onderhouden, en je kunt elk item apart stijlen of uitbreiden zonder dat je lijst-code een puinhoop wordt.
Vuistregel: Zodra je in je v-for meer dan 1-2 regels template hebt → trek het uit naar een eigen component. Je StudentList blijft zo overzichtelijk, en je StudentCard kun je hergebruiken in andere lijsten of pagina's.
<!-- src/components/StudentCard.vue -->
<script setup>
defineProps({
student: {
type: Object,
required: true
}
})
</script>
<template>
<div class="student-card">
<h3>{{ student.name }}</h3>
<p>{{ student.role }}</p>
</div>
</template><!-- src/components/StudentList.vue -->
<script setup>
import { ref } from 'vue'
import StudentCard from './StudentCard.vue'
const students = ref([
{ id: 1, name: 'Anna', role: 'Frontend' },
{ id: 2, name: 'Bram', role: 'Backend' },
{ id: 3, name: 'Chloé', role: 'Design' }
])
</script>
<template>
<div>
<h2>Studenten:</h2>
<StudentCard
v-for="student in students"
:key="student.id"
:student="student"
/>
</div>
</template>Let op: De :key zet je op het component zelf (waar de v-for staat), niet binnen het component!
Zie het in actie
Je hebt nu de code gezien — een array van objecten die via v-for in components verandert. Hieronder zie je exact dat proces visueel. Klik "Run v-for":
De Data
Het Resultaat
Het grote inzicht: Het aantal objecten = het aantal components. Heb je 3 studenten in je array? Dan krijg je precies 3 StudentCard components op je scherm. Voeg er één toe, en er verschijnt automatisch een vierde.
Index krijgen tijdens loopen
Soms wil je ook de positie (index) van een item weten. Vue heeft hier een speciale syntax voor:
<template>
<ul>
<li v-for="(fruit, index) in fruits" :key="index">
{{ index + 1 }}. {{ fruit }}
</li>
</ul>
</template>Resultaat:
<ul>
<li>1. Appel</li>
<li>2. Banaan</li>
<li>3. Sinaasappel</li>
</ul>v-for op objecten (key + value)
<script setup>
const person = {
name: 'Anna',
age: 25,
city: 'Amsterdam'
}
</script>
<template>
<ul>
<li v-for="(value, key) in person" :key="key">
{{ key }}: {{ value }}
</li>
</ul>
</template>Let op de volgorde: bij arrays is het (item, index), bij objecten is het (value, key). Easy om te verwarren!
Key Regels
- Keys moeten uniek zijn binnen de lijst
- Gebruik het ID als je dat hebt (beste optie)
- Index alleen als laatste optie — kan problemen geven bij wijzigingen
- Keys moeten stabiel zijn — gebruik geen random numbers!
- Keys zijn alleen voor Vue — ze verschijnen niet in je HTML
- Vergeet de
:niet —:key, nietkey
Veelgemaakte Fouten
Fout — geen key:
<div v-for="user in users"> <!-- Console warning! -->
{{ user.name }}
</div>Goed — wel key:
<div v-for="user in users" :key="user.id">
{{ user.name }}
</div>Fout — vergeten : voor key:
<div v-for="user in users" key="user.id">
<!-- key wordt letterlijk de string "user.id" voor ALLE items! -->
</div>Goed — :key:
<div v-for="user in users" :key="user.id">
<!-- key wordt de waarde van user.id -->
</div>Fout — index bij veranderlijke lijst:
<div v-for="(user, index) in users" :key="index">
{{ user.name }}
<!-- Problemen bij toevoegen/verwijderen aan begin! -->
</div>Goed — unieke ID:
<div v-for="user in users" :key="user.id">
{{ user.name }}
<!-- Stabiel en uniek! -->
</div>Fout — random key:
<div v-for="user in users" :key="Math.random()">
{{ user.name }}
<!-- Elke render nieuwe key! -->
</div>Goed — stabiele key:
<div v-for="user in users" :key="user.id">
{{ user.name }}
<!-- Key blijft hetzelfde -->
</div>