DEV {JS}

Mode sombre

Étape 7 – Afficher les Pokémon dans la grille ​

🎯 Objectifs de l’étape ​

Dans cette étape, vous allez afficher la liste des Pokémon dans la grille Vuetify que vous avez préparée à l’étape précédente.
Vous apprendrez à :

  • parcourir dynamiquement un tableau avec v-for,
  • afficher des données issues du store Pinia,
  • insérer une image dans chaque carte.

📝 Étapes à suivre ​

  1. Dans index.vue, repérez la grille <v-row> que vous avez créée à l’étape 5.

  2. Remplacez la colonne statique par une boucle v-for sur la liste des Pokémon stockée dans le pokemonStore.

Voici un exemple de code à insérer dans le <v-row> :

vue
<v-col
  v-for="pokemon in pokemonStore.pokemons"
  :key="pokemon.id"
  cols="12"
  sm="6"
  md="4"
  lg="3"
  xl="2"
>
  <p>{{ pokemon.name }}</p>
</v-col>
  1. (Bonus) Ajoutez une image pour chaque Pokémon :
vue

<v-img :src="`/images/${pokemon.img}`" height="200" contain/>

📦 Exemple complet dans index.vue ​

vue
<template>
  <v-container>
    <h1 class="mb-6 text-center">Pokédex</h1>

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

    <v-row>
      <v-col
        v-for="pokemon in pokemonStore.pokemons"
        :key="pokemon.id"
        cols="12"
        sm="6"
        md="4"
        lg="3"
        xl="2"
      >
        <v-img :src="`/images/${pokemon.img}`" height="200" contain />
        <p class="text-center">{{ pokemon.name }}</p>
      </v-col>
    </v-row>
  </v-container>
</template>

<script setup>
import { usePokemonStore } from '@/stores/pokemonStore'

const pokemonStore = usePokemonStore()
</script>

✅ Résultat attendu ​

  • Une grille responsive avec une carte par Pokémon
  • Chaque carte affiche le nom et l’image du Pokémon
  • Les données viennent du store Pinia (pokemonStore.pokemons)

🧪 Tester votre travail ​

  1. Lancez l’application avec npm run dev
  2. Ouvrez la page d’accueil
  3. Vous devriez voir apparaître une grille d’images de Pokémon avec leur nom

📘 Documentation utile ​

💡 Astuce bonus ​

Vous pouvez ajouter des classes comme pa-2 ou elevation-2 à vos colonnes ou images pour améliorer la présentation visuelle.