Commit 356b5cd1 authored by cc201010's avatar cc201010
Browse files

Showing the pokemon name and image.

parent f597391e
<script>
export default {
}
</script>
<template>
<h1>Home Page</h1>
</template>
\ No newline at end of file
<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>
\ No newline at end of file
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment