ListarPokemon.vue

<template>
  <h1>Listar Pokemon</h1>
  <ul>
    <li v-for="pokemon of listaPokemon" :key="pokemon.id">
      <p>
        {{ pokemon.name }}
        <span><button @click="obterDetalhes(pokemon)">detalhes</button></span>
      </p>
      <div v-if="pokemon.detalhe">
        <p>{{ pokemon.detalhe.base_experience }} <img :src="pokemon.detalhe.image" alt="" /></p>
      </div>
    </li>
  </ul>

  <button @click="carregarMais">Carrega mais</button>
</template>

<script>
export default {
  data: () => ({
    listaPokemon: [],
    proximaPagina: null
  }),
  mounted() {
    console.log('montei')
    const urlpokemon = 'https://pokeapi.co/api/v2/pokemon'
    fetch(urlpokemon)
      .then((response) => response.json())
      .then((pokemons) => {
        console.log(pokemons)
        this.listaPokemon = pokemons.results
        this.proximaPagina = pokemons.next
        // for (const pok of this.listaPokemon) {
        //   this.obterDetalhes(pok)
        // }
      })
  },
  methods: {
    obterDetalhes(pokemon) {
      console.log(pokemon)
      fetch(pokemon.url)
        .then((response) => response.json())
        .then((detalhes) => {
          pokemon.detalhe = {
            image: detalhes.sprites.front_default,
            base_experience: detalhes.base_experience
          }
          console.log('->', pokemon)
        })
    },
    carregarMais() {
      fetch(this.proximaPagina)
        .then((response) => response.json())
        .then((pokemons) => {
          this.proximaPagina = pokemons.next
          for (const pok of pokemons.results) {
            this.listaPokemon.push(pok)
            //this.obterDetalhes(pok)
          }
        })
    }
  }
}
</script>

<style></style>