DEV {JS}

Mode sombre

Étape 10 – Trier les Pokémon par ordre alphabétique ​

🎯 Objectifs de l’étape ​

Dans cette étape, vous allez trier les Pokémon par nom (A → Z) avant de les afficher.
Ce tri doit s’appliquer même si aucun texte n’est saisi dans la recherche.

Vous apprendrez à :

  • créer une propriété calculée pour trier un tableau,
  • combiner tri et recherche dynamique.

📝 Étapes à suivre ​

  1. Dans index.vue, créez une nouvelle propriété computed pour trier les Pokémon par ordre alphabétique :
js
const sortedPokemons = computed(() => {
  return [...pokemonStore.pokemons].sort((a, b) =>
    a.name.localeCompare(b.name)
  )
})

💡 [...] permet de créer une copie du tableau, pour ne pas modifier l’original.

  1. Modifiez la propriété filteredPokemons pour qu’elle s’applique sur la liste triée :
js
const filteredPokemons = computed(() => {
  const query = search.value.toLowerCase().trim()
  return sortedPokemons.value.filter(pokemon =>
    pokemon.name.toLowerCase().includes(query)
  )
})

✅ Résultat attendu ​

  • Les Pokémon sont affichés par ordre alphabétique dès le chargement
  • La recherche fonctionne toujours correctement
  • Le tri est toujours actif après une recherche

📘 Documentation utile ​

🧠 Pourquoi séparer tri et recherche ? ​

1. Lisibilité ​

Chaque fonction (sortedPokemons, filteredPokemons) fait une seule chose clairement identifiable.

2. Performances ​

Vue optimise les computed. Si seule la recherche change, le tri n’est pas recalculé inutilement.

3. Réutilisabilité ​

Le tableau trié (sortedPokemons) peut être utilisé dans d’autres pages (ex : favoris) sans dupliquer le tri.

💡 Suggestion bonus ​

Plus tard, vous pourrez permettre à l’utilisateur de choisir l’ordre de tri via un menu déroulant (v-select).

Exemple :

js
const sortDirection = ref('asc')

const sortedPokemons = computed(() => {
  return [...pokemonStore.pokemons].sort((a, b) =>
    sortDirection.value === 'asc'
      ? a.name.localeCompare(b.name)
      : b.name.localeCompare(a.name)
  )
})