v-for affiche une liste d'éléments en itérant sur un tableau (ou un objet/plage). Vous devez toujours l'associer à un :key unique pour que Vue puisse suivre les éléments efficacement.
<script setup>
import { ref } from "vue";
const items = ref([{ id: 1, name: "Apple" }, { id: 2, name: "Banana" }]);
</script>
<template>
<ul>
<li v-for="item in items" :key="item.id">{{ item.name }}</li>
</ul>
</template>
<template>
<li v-for="(item, index) in items" :key="item.id">{{ index }}: {{ item.name }}</li>
<li v-for="(value, key) in myObject" :key="key">{{ key }}: {{ value }}</li>
<span v-for="n in 5" :key="n">{{ n }}</span> <!-- range 1..5 -->
</template>
Vue utilise la key pour identifier les éléments qui ont changé, ont été ajoutés ou supprimés, afin qu'il puisse réutiliser et réorganiser les nœuds DOM existants au lieu de les reconstruire. Sans une clé stable, Vue revient à une stratégie de "correctif sur place" qui peut causer des bugs :
<!-- ❌ using index as key → wrong when the list reorders/filters -->
<li v-for="(item, i) in items" :key="i">
<input /> <!-- input state can attach to the WRONG item after reordering -->
</li>
<!-- ✅ stable unique id → Vue tracks each item correctly -->
<li v-for="item in items" :key="item.id">...</li>
Utiliser l'index du tableau comme clé est une erreur courante — quand les éléments sont réorganisés, insérés ou supprimés, l'état du composant/DOM (comme les valeurs d'entrée ou les états des cases à cocher) peut rester attaché à la mauvaise ligne.
<!-- ❌ avoid — ambiguous precedence -->
<li v-for="x in items" v-if="x.active">...</li>
<!-- ✅ filter in a computed, or wrap with <template v-for> -->
v-for est la façon d'afficher des listes dynamiques.
La :key n'est pas optionnelle en pratique : une clé stable et unique permet au DOM virtuel de Vue de faire un diff efficace et évite les bugs subtils de désynchronisation d'état lors de la réorganisation/filtrage.
Savoir utiliser un vrai id (jamais l'index pour les listes dynamiques) et garder v-for/v-if séparés est essentiel pour des listes correctes et performantes.