APIから選択肢を検索して呼び出せるドロップダウンリスト
こういうドロップダウンリストを作りたいとき、ありますよね。
プロトタイピングなどでさくっと実装したいと思っても、一から自分で作るとなると苦しい要素が満載ですが、Vuetifyを使ってみたらあっという間で感動しました。
コードはこちら
https://codepen.io/kokky/pen/eQwvZM?editors=1010
そもそもVuetifyとは
マテリアルデザインを採用したvue.jsのUIコンポーネント集です。Bootstrapのマテリアルデザイン版。かゆいところに手が届く！つよい！
今回利用するのは、Vuetifyのautocomplete componentです。導入・ドキュメントはこちらから。日本語版だと、なぜかドキュメントの説明が表示されないので、英語版でアクセスしてください。
https://vuetifyjs.com/en/components/autocompletes
なんとなくコピペしていろいろいじると動きます。すごい！
HTML解説（抜粋）
<v-autocomplete
v-model="model"
:items="items"
:loading="isLoading"
:search-input.sync="search"
color="white"
item-text="Description"
item-value="API"
cache-items
hide-no-data
hide-selected
placeholder="入力できます"
prepend-icon="mdi-database-search"
return-object
></v-autocomplete>
各プロパティの意味は以下の通りです。
- items：APIでfetchした選択肢を持つ
- item-text, item-value：選択肢で表示上のテキストと、値をバラバラに持つためのプロパティ
- loading：APIを読み込み中、テキスト入力欄の下線をいい感じでアニメーションさせる
- search-input.sync：この検索クエリに基づいて、APIからデータを読み込む
- cache-items：一度でもitemsに入った値を、ローカル変数で保持する
- hide-no-data：これがあると、検索結果が見つからないときに「no data available」と表示される
- hide-selected：現在選択中の選択肢が、ドロップダウンリストに表示されなくなる
- return-object：このオプションがあると、選択肢をクリックした際に「クリックしたitemのvalue」ではなく「itemオブジェクトそのもの」が返る
JS部分解説（抜粋）
検索部分に入力した内容「search」が更新されるごとに、以下の処理が行われて、APIからデータを読み込んでいきます。
watch: {
search(val) {
// すでに読み込み済みの場合は、何もしない
if (this.items.length > 0) return
// 読み込み中の場合も、何もしない
if (this.isLoading) return
this.isLoading = true
// APIから、選択肢をfetchする
axios.get('https://api.publicapis.org/entries').then(res => {
const {
count,
entries
} = res.data
this.count = count
this.entries = entries
}).catch(err => {
console.log(err)
//読み込みが完了したので、loadingをfalseに
}).finally(() => (this.isLoading = false))
}
}
HTML・JS合わせたコード全編はこちらです
https://codepen.io/kokky/pen/eQwvZM?editors=1010
おまけ：Vuetifyを導入するか迷ったら
autocomplete component以外にも、
- ウィンドウサイズに応じていい感じにサイドメニューを開閉するコンポーネント
- ページ読み込みのローディングエフェクト
- ツールチップやダイアログ
など、一から作るにはちょっと面倒だな…と思うようなコンポーネントが集まっているので、とにかくスピード重視で開発したい方におすすめ。新コンポーネント追加やバグフィックスのためにすごい頻度でバージョンアップするので、体感的には安定したβ版、といった心づもりで使うのが良さそうです。
今のところ唯一感じているデメリットは、Vuetifyのコンポーネントが持つデフォルトスタイルを上書きしづらいこと（stylusで記述されているのでひと手間かかる）。stylusからscssに切り替えるロードマップが進んでいるので、バージョンアップを祈るばかりです。なむなむ。