{task}
\n{/each}\n\n\n\nLivrable attendu : Ajouter une clé stable dans la boucle each afin d'assurer un rendu prévisible.","learningResourceType":"Practice problem","educationalLevel":"easy","teaches":["svelte","each","key","list"],"programmingLanguage":"Svelte","provider":{"@type":"Organization","name":"CodeDuel","url":"https://codeduel.net"},"step":[{"@type":"HowToStep","text":"Analyse de l'énoncé et du code existant."},{"@type":"HowToStep","text":"Implémentation de la solution technique."},{"@type":"HowToStep","text":"Validation par tests unitaires et IA."}]}Retour aux cas pratiques
SvelteFondamental
Stabilisation d'une liste dynamique avec clé manquante
Scénario
Contexte : Une application interne affiche une liste de tâches récupérées depuis une variable locale. Le Problème : Lors de l'ajout ou suppression d'éléments, l'affichage devient incohérent et certains éléments semblent se mélanger. Contraintes : Vous devez corriger uniquement la gestion de la boucle each. Aucune librairie externe. Code actuel : <script> let tasks = ['A', 'B']; function addTask() { tasks = [...tasks, 'Nouvelle tâche']; } </script> {#each tasks as task} <p>{task}</p> {/each} <button on:click={addTask}>Ajouter</button> Livrable attendu : Ajouter une clé stable dans la boucle each afin d'assurer un rendu prévisible.
Compétences ciblées
svelteeachkeylist