Commit 928480d1 authored by cc201010's avatar cc201010
Browse files

1. Port the Pokemon to individual components

parent db160f34
......@@ -8,7 +8,6 @@ import HelloWorld from './components/HelloWorld.vue'
<template>
<img alt="Vue logo" src="./assets/logo.png" />
<HelloWorld msg="Hello Vue 3 + FH + Vite" />
<Greet></Greet>
</template>
<style>
......
<template>
<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>
<script>
export default{
name:'pokemonTag',
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>
\ No newline at end of file
<script>
import pokemonTag from '../components/pokemonComp.vue'
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;
components:{
pokemonTag,
}
},
}
</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>
<pokemonTag/>
</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