\n\nLivrable attendu : Corriger la logique du watcher afin d'éviter les appels en boucle tout en conservant un rechargement correct lors du changement du filtre.","learningResourceType":"Practice problem","educationalLevel":"medium","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
Avancé
Stabilisation d'un watcher provoquant des appels API en boucle

Type d'évaluation

Mise en situation réelle

Analyse

Intelligence Artificielle

Compétences ciblées

vue
watch
api
compositionapi
performance

Scénario Technique

Contexte : Vous reprenez un module Vue.js qui recharge automatiquement des données dès qu'un filtre change dans un tableau analytique interne. Le Problème : À chaque mise à jour des données récupérées, le watcher relance un nouvel appel API, créant une boucle infinie et surchargeant le backend. Contraintes : Vous devez conserver l'API Composition. Aucune librairie externe autorisée. La récupération doit rester asynchrone via fetch. Code actuel : <script setup> import { ref, watch } from 'vue'; const filter = ref('all'); const data = ref([]); watch(data, async () => { const res = await fetch(`/api/items?filter=${filter.value}`); data.value = await res.json(); }); </script> Livrable attendu : Corriger la logique du watcher afin d'éviter les appels en boucle tout en conservant un rechargement correct lors du changement du filtre.

Prêt à évaluer ce talent ?

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

Commencer le Défis