初めに
こんにちは。皆さんお元気でしょうか。
職務の中でVue.jsを使って開発をしているのですが、ここ最近Vue.jsにはたっっくさんの便利なライブラリが存在することを知りました。本記事では、その中でも一際目を引いた、それはもう綺麗なセレクトボックスを実装できるVue-multiselectについて紹介したいと思います。それでは行ってみよう！！！
Vue-multiselectって何よ
公式サイト曰く、このライブラリは「The most complete selecting solution for Vue.js」。
つまり、Vue.jsのセレクトボックスにとって最適なソリューション であるとの説明がなされています。おお、期待値が上がりまくりますね。
シングルセレクト、複数選択、タグ付け、ドロップダウン、フィルタリングなど様々な機能を持ったセレクトボックスを簡単に実装することができるようです。
※今回、インストール手順の説明は省かせていただきます。
※本記事でのVue, Vue-multiselectの各バージョンは以下の通りです。
Vue: 2.6.12
Vue-multiselect: 2.1.0
基本的な使い方
今回はcodepen上でCDNを用いて試していきます。
基本のセレクトボックスを作りたい場合には、以下のように実装できます。
See the Pen Untitled by miyashu (@miyashu) on CodePen.
めっっちゃ綺麗ですね。色もついてて選択状態がわかりやすい上に「Press enter to select」というガイドもあって親切です。さて、以下に主要な項目を列挙していきます。-
placeholder
セレクトボックスが初期状態で選択されていない場合、ここで設定したテキストが表示されます。 -
options
選択肢として設定したい配列を指定。必ず配列で指定してください。ハッシュのままだと余裕で動きません。 -
v-model
これはVueMultiselectではなくVue.jsのデータバインディング機能です。
サーバーサイドへ選択されたデータを渡したい場合には、Ajax通信などを用いてselectedOptionsのデータを渡すことができます。
そしてなんと、、検索機能がデフォルトで付いています！！！
セレクトボックスを選択した状態で「スパ」と打つと、「スパイダーマン」の選択肢が自動的に表示されます。こりゃすごい。
以上が基本的な実装方法になります。すごーーく簡単で明快です。
ここからは、使い所が多そうな「複数選択」と「optionsが連想配列の場合」の２つの機能付きセレクトボックスをそれぞれ実装する方法について取り上げていきます。
複数選択
See the Pen Untitled by miyashu (@miyashu) on CodePen.
-
:multiple="true"
この条件により複数選択が可能になります。 -
:close-on-select="false"
この条件により選択肢が選択された後もプルダウンが表示されたままになり、複数選択がしやすくなります。
この２つの条件を足すだけです。何やらタグのようなものまで現れました、、、すごい。。。
optionsが連想配列の場合
See the Pen Untitled by miyashu (@miyashu) on CodePen.
-
custom-label
ここで関数を指定すると、その返り値が選択肢として表示されるようになります。
optionsが連想配列で各キーのバリューを組み合わせた選択肢を表示したい時などに助かります。こういうかゆいところまで手が届く感じ、個人的にめっちゃ好きです。
終わりに
あまりにも簡単に実装できてしまうことにめちゃくちゃ驚きました。
セレクトボックスが綺麗で使いやすいものであれば、ユーザーからの印象も良くなるのではないかと思うので、開発者、ユーザー双方どちらも嬉しいですね。公式ドキュメントが言う通り、VueMultiselectはVueセレクトボックスにとって最適なソリューションだなと思いました。
参考文献
この記事を書くにあたり、以下のサイトを参考にさせていただきました。