Vue.jsでポケモン図鑑を作ってる話

vue-pokedex-89790.firebaseapp.com

3連休だったのでVue.jsの勉強もかねてこんなの作りました。
Vue.jsのポケモン図鑑です。

データ

データソースは古都ことさん(@kfurumiya)が公開しているpokemon_data.jsonです。

github.com

構成

Vue.js + UIフレームワークのVuetify

目的

Vue.jsのコンポーネント操作を覚えたかった。

やったこと

今回はヘッダー + メインの2枚のコンポーネントをメインにして、ポケモン情報のコンポーネントをポケモンの数分作っている。

<!-- MyComponent1.vue -->
<v-container>
    <v-layout class="row">
        <div v-for="Pokemon in PokemonList" v-bind:key="Pokemon.no">
            <Pokemon v-bind:Pokemon="Pokemon"/>
        </div>
    </v-layout>
</v-container>

<!-- Pokemon.vue -->
<v-flex xs4>
    <v-card min-width="300px" height="100%" @click.stop="dialog = true">
        <v-card-title>{{Pokemon.no}}:{{Pokemon.name}}</v-card-title>
        <v-divider></v-divider>
        <v-card-text height="300px">{{Pokemon.form}}</v-card-text>
        <v-card-text height="300px">タイプ1:{{Pokemon.types[0]}}</v-card-text>
        <v-card-text height="300px">タイプ2:{{Pokemon.types[1]}}</v-card-text>
    </v-card>
</v-flex>

ポケモン情報のコンポーネントの横並び配置は、Vuetifyのv-cardをflexboxのrowとして配置することで実現した。

まとめ

まだ未完成なのでもう少し手を入れたい。
pokemon_data.jsonはVue.jsの学習の題材としてとてもよかった。