format_list_bulleted
【Vue.js】Vue-multiselectについて解説
最終更新日時:2020-05-03 12:52:06



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を是非活用してみましょう!