Étape 9 – Ajouter la recherche dynamique

🎯 Objectifs de l’étape

Dans cette étape, vous allez rendre le champ de recherche fonctionnel sur la page d’accueil.
L’objectif est de filtrer dynamiquement la liste des Pokémon selon le texte saisi.

Vous apprendrez à :

• lier un champ v-text-field à une variable réactive (ref),
• créer une propriété calculée (computed) pour filtrer un tableau,
• afficher uniquement les Pokémon dont le nom correspond à la recherche.

📝 Étapes à suivre

1. Dans la section <script setup> de index.vue, importez ref et computed :

import {ref, computed} from 'vue'

2. Créez une variable réactive pour stocker la recherche :

const search = ref('')

3. Liez cette variable au champ v-text-field :

<v-text-field
  v-model="search"
  label="Rechercher un Pokémon"
  prepend-icon="mdi-magnify"
  clearable
/>

4. Créez une propriété calculée pour filtrer la liste :

const filteredPokemons = computed(() => {
  const query = search.value.toLowerCase().trim()
  return pokemonStore.pokemons.filter(pokemon =>
    pokemon.name.toLowerCase().includes(query)
  )
})

5. Remplacez pokemonStore.pokemons dans le v-for par filteredPokemons :

<v-col
  v-for="pokemon in filteredPokemons"
  :key="pokemon.id"
  ...
>
  <PokemonCard :pokemon="pokemon" />
</v-col>

✅ Résultat attendu

• Le champ de recherche filtre les Pokémon en temps réel
• La recherche est insensible à la casse (majuscules/minuscules)
• Si aucun résultat ne correspond, la grille est vide

📘 Documentation utile

• 🔍 Vue – Computed Properties
• 🧠 MDN – Array.prototype.filter()
• ✍️ Vuetify – Text fields

💡 Astuce bonus

Vous pouvez afficher un message si aucun Pokémon ne correspond à la recherche :

<v-alert v-if="filteredPokemons.length === 0" type="warning" class="text-center mt-4">
  Aucun Pokémon ne correspond à votre recherche.
</v-alert>

🧠 Pourquoi utiliser une propriété computed ?

Une propriété computed est automatiquement recalculée uniquement si ses dépendances changent.
Ici, elle dépend de search et de la liste pokemonStore.pokemons.

Cela rend le code :

• plus lisible,
• plus performant,
• plus facile à maintenir.