わんすけに聞いてみる Web開発 [jsライブラリ]Vue Selectの使い方を試す。

[jsライブラリ]Vue Selectの使い方を試す。



おしゃれなセレクトボックスが使えるプラグインがあったので試してみる。

 

1.vue-selectって何だ?

その名の通りだけど、vue.jsで使えるセレクトボックス拡張のプラグインです。

 

本家はこちら。 GitHub - sagalbot/vue-select

軽くドキュメント見ると、めちゃ多機能っぽい。

さっそく機能を試してみましょ。

 

2.導入方法

CDNがるので、これですぐ試せる。(vue.js + vue-select)

ほんで、ライブラリの引き込みが完了したら

Javascript側でこの記述を最初に入れて、'v-select'って名前のコンポーネント定義を読み込みます。

ここまでは定型文だからコピペでおっけー。

これで準備は整ったのでさっそく試していきましょー

 

3.実装方法

当然、Vueのコンポーネントとして読みこんだのでVueオブジェクトの中で使っていくよー

まずは、素材の味から楽しみましょう。一番簡単な実装から。

{{ selected }}

 

Vueの中でコンポーネント v-selectを定義して、:options属性でリスト渡せば選択リストになってselectedをv-modelバインディングしとけば選択値が取れるよと。

(微妙にページテーマのスタイルと競合してなんかレイアウト崩れるなぁ・・・?)

 

複数選択に対応させてみる。

multiple属性を追加するだけで複数選択に対応した感じに仕上がる。なんかイマドキ。

{{ selected }}

取得値は配列になって入ってくる。

 

タグ付け(自由入力許可)

taggable属性を付けるとプルダウン選択だけじゃなくてフリー入力された文字列をタグ付けして選択値にできる。

{{ selected }}

push-tags属性で、そのフリー入力値をさらにプルダウン選択リストに追加できるってなってるけど、どゆとき使うのかな?

 

イベント発生を拾う。

イベントトリガ管理は、バージョンごとに結構変更かかってるみたい。

開発当初までは、onChange・onInput・onSearchが使えてたみたいだけど、v2から削除されて@change・@inputっていう属性が使えるようになったけど、それがv3で@inputに統合されてるみたい?

一応、このデモは2019/11/30時点の情報と思ってください?

このページのCDNは最新バージョン引き込む様にしてるので、動かなくなったら追加調査しまーす。

{{ selected }}

 

リストのカスタマイズ

カスタマイズも、v-slotテンプレート使うと簡単にできちゃうのだ。



 

わんすけへ寄付金を送る

このサイトの情報が役に立ったなーって思う方がいらっしゃれば、

是非「わんすけに缶コーヒー1本でもご馳走する」気持ちでポチってあげて下さい?

¥120

「[jsライブラリ]Vue Selectの使い方を試す。」への1件のフィードバック

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

Related Post