Pokedex.vue 684 Bytes
Newer Older
cc201010's avatar
cc201010 committed
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<script>
export default {
  name:'PokedexPage',
  data(){
    return{
      list:[]
    }
  },
  methods:{
    async fetchPokemon(){
      const url = 'https://pokeapi.co/api/v2/pokemon?limit=151'

      const data = await fetch(url);
      const pokemon = await data.json();
      this.list = await pokemon.results;
    }
  },

}
</script>

<template>
<h1>Pokedex Page</h1>
 <button @click="fetchPokemon">Catch Pokemon</button>

  <ul>
    <li v-for="(pokeman,index) in list" :key="index">
      <p> {{pokeman.name}}</p>
      <img :src="`https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${ index + 1}.png`" :alt="pokeman.name">
    </li>
  </ul>

</template>