vue-multiselectとは?
Vue-multiselectとは、選択機能を実装するライブラリです。
Vue-multiselectのインストール方法
Vue-multiselectをインストールする方法について説明します。
npmを使用してインストールする方法
npmを使用してインストールする場合、コマンドラインに次のコードを記述してインストールします。
$npm install --save vue-multiselect
CDNを使用してインストールする方法
CDN(Content Delivery Network)を使用してインストールする場合、htmlファイルの<Body>タグの中に次のコードを記述します。
<script src="https://unpkg.com/vue-multiselect@2.1.0"></script> <link rel="stylesheet" href="https://unpkg.com/vue-multiselect@2.1.0/dist/vue-multiselect.min.css">
Vue-multiselectの使用方法
HTMLファイルとJSファイルを用いて、CDNを利用したvue-multiselectの扱い方について説明していきます。さらに、選択機能を拡張したタグ付け機能についても紹介します。
ライブラリの取り込み
CDNで取り込む場合、ライブラリの取り込みに関してはHTMLのBodyに次のコードを入力し、JavaScript内で以下のコードを入力すれば完了です。
(index.html)
<script src="https://unpkg.com/vue-multiselect@2.1.0"></script> <link rel="stylesheet" href="https://unpkg.com/vue-multiselect@2.1.0/dist/vue-multiselect.min.css">
(test.js)
Vue.component('multiselect', window.VueMultiselect.default)
選択機能の設定
では、実際に選択機能を実装していきたいと思います。選択機能を実装するためのコードを次に示します。また、index.htmlのコードにmultiselectのプロパティについてそれぞれ説明してあります。
(index.html)
<div id="app"> <multiselect v-model="" //選択されたものの場所 :options="" //データの場所 :searchable="" //検索して選択できるか(true or false) :close-on-select="" //選択したら閉じる(true or false) :clear-on-select="" //クリアー(true or false) :allow-empty="" // 空欄を許可するか(true or false) :multiple = "" //複数選択可能か(true or false) placeholder="通常セレクタ" //プレースホルダー名 > </multiselect> </div>
(test.js)
Vue.component('multiselect', window.VueMultiselect.default) new Vue({ el: "#app", data: { selected: null,//選択された場所 options: ['apple', 'banana', 'grape']//選択要素 }, })
選択機能の実装例
実際に実装してみます。今回は複数選択できるように実装します。
コード
(index.html)
<div id="app"> <multiselect v-model="selected" :options="options" :multiple="true" :close-on-select="true" placeholder="複数選択"> </multiselect> </div> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <script src="https://unpkg.com/vue-multiselect@2.1.0"></script> <link rel="stylesheet" href="https://unpkg.com/vue-multiselect@2.1.0/dist/vue-multiselect.min.css"> <script src="./test.js" ></script>
(test.js)
Vue.component('multiselect', window.VueMultiselect.default) new Vue({ el: "#app", data: { selected: null, options: ['apple', 'banana', 'grape'] }, })
実装
タグ付け機能の実装
選択機能を拡張してタグ付け機能を実装します。選択画面にテキストを入力してタグをつけることができます。
コード
(index.html)
<div id="app"> <multiselect v-model="taggingSelected" :options="taggingOptions" :multiple="true" :taggable="true" label="name" track-by="code" @tag="addTag" tag-placeholder="Add this as new tag" placeholder="Type to search or add tag" > </multiselect> </div>
(test.js)
Vue.component('multiselect', window.VueMultiselect.default) new Vue({ el: "#app", data: { taggingOptions: [], taggingSelected: [], }, methods: { addTag: function(newTag) { const tag = { name: newTag, code: newTag.substring(0, 2) + Math.floor((Math.random() * 10000000)) } this.taggingOptions.push(tag) this.taggingSelected.push(tag) }, } })
実装
この記事のまとめ
本記事ではVue-multiselectを、実際の実装例を元に説明しました!
最後に記事の要点をまとめてみましょう。
- Vue-multiselectを使うことで、選択機能が実装できる
- さらに検索選択や複数選択、タグ付け機能が実装できる
Vue-multiselectを是非活用してみましょう!