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