Edited at

Vuetifyで、APIから選択肢を検索して呼び出せるドロップダウンリストをつくる


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に切り替えるロードマップが進んでいるので、バージョンアップを祈るばかりです。なむなむ。