Exercices Listes & Rendu Conditionnel
10 exercices pour maîtriser v-for, les clés, le tri/filtrage et la pagination réactive.
v-for sur un tableau
Tâche : Créez une application Vue 3 avec un tableau fruits dans data() et affichez-le avec v-for + :key.
v-for sur un objet
Tâche : Créez un objet profil avec 4 propriétés et affichez-les avec v-for="(valeur, cle) in profil".
:key stable avec ID
Tâche : Créez une liste de tâches avec des objets { id, texte } et utilisez :key="tache.id" (pas l'index) pour éviter les bugs de réordonnancement.
filter avec computed
Tâche : Créez une liste de produits avec un data categorie et une computed produitsFiltres qui utilise filter().
sort avec computed
Tâche : Créez une computed itemsTries qui utilise [...this.items].sort() (copie avant tri pour ne pas muter l'original).
Ajouter / Supprimer un item
Tâche : Implémentez ajouterItem() avec push() et supprimerItem(id) avec filter().
v-if dans v-for avec <template>
Tâche : Utilisez <template v-for> et placez v-if sur l'élément enfant (pas sur le même élément que v-for).
Recherche filtrée
Tâche : Créez un input avec v-model lié à recherche et une computed qui filtre la liste avec includes().
Pagination avec computed
Tâche : Implémentez une pagination avec pageCourante dans data() et une computed itemsPage qui utilise slice().
Liste complète : recherche + tri + pagination
Tâche : Combinez recherche, tri et pagination dans une seule application. Enchaînez les computed : filtre → tri → pagination.
Passer le QCM V06