\n\n\n\nLivrable attendu : Corriger la gestion des clés pour garantir un rendu stable et prévisible.","learningResourceType":"Practice problem","educationalLevel":"easy","teaches":"Vue.js","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."}]}
Vue.js
Fondamental
Stabilisation d'une liste dynamique mal rendue

Type d'évaluation

Mise en situation réelle

Analyse

Intelligence Artificielle

Compétences ciblées

vue
vfor
key
liste

Scénario Technique

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.

Prêt à évaluer ce talent ?

Accédez à l'interface de test complète pour soumettre votre architecture ou votre code.

Commencer le Défis
    Vue.js - Stabilisation d'une liste dynamique mal rendue | Test Technique & Recrutement