Étape 14 — Transposition projet personnel

Objectif

Appliquer les concepts de la séquence 4 (recherche, filtre, tri) à votre projet individuel.

Ce que vous avez appris

Concept	Pokédex	Votre projet
computed()	Filtrer/trier les Pokémon sans modifier le store	Filtrer/trier vos données
v-model sur v-text-field	Recherche par nom en temps réel	Recherche dans vos données
v-model sur v-select	Filtre par type de Pokémon	Filtre par catégorie/statut
Chaînage de computed	filteredByType → filteredBySearch → sortedPokemons	Votre pipeline de transformations
Array.filter()	Garder les Pokémon qui correspondent	Filtrer vos éléments
Array.sort() + localeCompare()	Tri A-Z / Z-A par nom	Trier vos éléments

Checklist projet perso

Avant de quitter, vérifiez que votre projet individuel a :

• Un champ de recherche avec v-model qui filtre en temps réel
• Un computed de recherche (insensible à la casse avec toLowerCase)
• Un filtre par catégorie avec <v-select> (ou un autre critère pertinent)
• Un tri avec bouton toggle (ascendant/descendant)
• Les computed sont chaînés (données → filtre → recherche → tri)
• Un message "Aucun résultat" quand la liste filtrée est vide
• Les données du store ne sont jamais modifiées directement
• 0 erreurs dans la console
• Commit poussé sur GitHub
• Version en ligne vérifiée (Vercel ou GitHub Pages)

Prochaine séquence

La semaine prochaine, on ajoutera un formulaire d'ajout de Pokémon avec validation. Préparez-vous à comprendre :

• v-model sur différents types de champs (texte, select, nombre)
• Validation de formulaire avec les règles Vuetify
• Requête POST vers l'API

Préparation oral — Concepts clés de la séquence 4

Questions que vous devez savoir expliquer :

1. Qu'est-ce qu'un computed ? Une donnée calculée qui se met à jour automatiquement quand ses dépendances changent. Contrairement à une méthode, le résultat est mis en cache et n'est recalculé que si nécessaire.

2. Pourquoi ne pas filtrer directement pokemonStore.pokemons ? Parce qu'on perdrait les données originales. Avec un computed, on crée une vue filtrée sans modifier la source. Si on vide la recherche, tous les Pokémon réapparaissent.

3. Comment fonctionne v-model ? C'est un raccourci pour le binding bidirectionnel : il combine :value (afficher la valeur) et @input (mettre à jour la valeur quand l'utilisateur tape). Quand la variable change, le champ se met à jour. Quand le champ change, la variable se met à jour.

4. Pourquoi chaîner les computed ? Pour séparer les responsabilités. Chaque computed fait une seule chose (filtrer par type, filtrer par nom, trier). On peut ajouter ou retirer une étape sans toucher aux autres.

5. Pourquoi [...array].sort() et pas array.sort() ? Array.sort() modifie le tableau en place (mutation). Dans un computed, on ne doit jamais modifier la source. Le spread [...] crée une copie avant de trier.

6. Qu'est-ce que localeCompare() ? Une méthode de String qui compare deux chaînes en respectant les règles linguistiques (accents, majuscules). 'é'.localeCompare('f', 'fr') retourne un nombre négatif (é vient avant f en français).