Stabilisation d'une liste dynamique mal rendue

السيناريو

Contexte : Une application interne affiche une liste de tâches saisies par les collaborateurs. Le Problème : Lorsqu'une nouvelle tâche est ajoutée, l'affichage devient incohérent et certains éléments semblent dupliqués. Contraintes : Vous devez corriger uniquement la gestion du v-for et des clés. Aucune librairie externe. Code actuel : <script setup> import { ref } from 'vue'; const tasks = ref(["A", "B"]); function addTask() { tasks.value.push("Nouvelle tâche"); } </script> <template> <ul> <li v-for="(task, index) in tasks" :key="index"> {{ task }} </li> </ul> <button @click="addTask">Ajouter</button> </template> Livrable attendu : Corriger la gestion des clés pour garantir un rendu stable et prévisible.

المهارات المستهدفة