vue-pokedex-89790.firebaseapp.com
タイプ絞り込みボタンと名前検索を実装してみました。
テンプレート
<v-layout class="row"> <div v-for="type in types" v-bind:key="type.index"> <v-btn @click="selectType=type">{{type}}</v-btn> </div> </v-layout> <v-text-field v-model="keyword" label="ポケモンの名前を入れてね" ></v-text-field> <v-layout class="row" mt-5 px-3 py-3> <div v-for="Pokemon in filteredPokemonList" v-bind:key="Pokemon.index"> <Pokemon v-bind:Pokemon="Pokemon"/> </div> </v-layout>
data部分
data() { return { keyword:"", selectType:"すべて", originPokemonList: [], types:[ "すべて", "ノーマル", "ほのお", "みず", "でんき", "くさ", "こおり", "かくとう", "どく", "じめん", "ひこう", "エスパー", "むし", "いわ", "ゴースト", "ドラゴン", "あく", "はがね", "フェアリー" ], } },
ファンクション部分
computed: { filteredPokemonList: function() { let PokemonList = []; for (let i in this.originPokemonList) { let p = this.originPokemonList[i]; if (p.name.indexOf(this.transHiraToKana(this.keyword)) !== -1) { if (p.types[0] == this.selectType || p.types[1] == this.selectType) { PokemonList.push(p); } if (this.selectType == "すべて") { PokemonList.push(p); } } } return PokemonList; }
表示するためのポケモンデータのリストにcomputedで宣言した関数を指定することで、ボタンやフォームの変化に合わせて表示を絞ることをしています。
computedは算出プロパティというもので、依存関係の監視を行ってくれます。
今回の例だと、dataの変数に変更があったことをトリガーにしてるっていう感じなんでしょうか……ちょっとまだ理解できてません。
