高機能なセレクトボックス「vue-select」の使い方

vue-selectとは

vue-selectは、HTML <select>要素でできることすべて、軽量で依存性のない、拡張可能なセレクトボックスコンポーネントライブラリです。

シングル/マルチオプションやタグ付け、フィルタリング/検索などの機能を備えています。

Githubのスターが4,000を超える人気ライブラリです。

【動画サイズ：273KB】

環境

この記事は、以下の管理人の検証環境にて記事にしています。

ライブラリの取得

ライブラリを取得するには、npm, yarn, CDNのどれか一つを使用します。

npm install vue-select

yarn add vue-select

<script src="https://unpkg.com/[email protected]"></script> 
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/vue-select.css">

gitリポジトリは以下から取得できます。

導入手順

管理人が行った、動作確認サンプルを実装するために、以下の手順でソースコードを導入していきます。
このサンプルでは、検索機能付きのセレクトボックスを実装します。

step
1ライブラリの呼び出し

ES6等で実装する場合

import Vue from 'vue' import vSelect from 'vue-select' 
import 'vue-select/dist/vue-select.css'; 

UMDで実装する場合（CDNを使用する場合）

const vSelect = VueSelect.VueSelect;

step
2Vueインスタンスを設定

Vue.component('v-select', vSelect);

new Vue({ 
  el: '#app', 
  data: { 
    selected: '',
    options: [ 'foo', 'bar', 'baz' ] 
  } 
})

step
3テンプレートを準備

<v-select>コンポーネントを設置します。
コンポーネントにv-modelを設定するとセレクトボックスので値を取得することができます。

サンプルはケバブケースで記載しています。

<div id="app">
 <v-select name="hoge" :options="options" v-model="selected"></v-select>
</div>

デモ

>>専用ページで確認する

セレクトボックスの表示文字と値を別にする

通常のセレクトボックス同様に表示している文字と渡されるデータを別にすることができます。

セレクトボックスに渡したい値をオブジェクト形式にします。
表示用の値をlabel、データとして渡したい値をcodeに設定します。

new Vue({
  el: '#app',
  data: {
    selected: '',
    options: [
      {label: '中国語', code: 'ch'},
      {label: '日本語', code: 'ja'},
      {label: '英語', code: 'en'},
      {label: '韓国語', code: 'kr'},
    ]
  }
})

>>専用ページで確認する

複数選択

<v-select>コンポーネントにmultiple を設定することで複数を選択できるようになります。

<v-select :options="options" multiple></v-select>

>>専用ページで確認する

選択を制限する

選択を制限することができます。
今回は、選択数3個までの制限を行います。

※バージョン3.3.0以上から

selectableを<v-select>コンポーネントに設定します。
値にはfunction形式で指定する必要があります。

<v-select 
  :options="options" 
  v-model="selected" 
  :selectable="function(){return selected.length < 3}" 
  multiple ></v-select>

>>専用ページで確認する

タグ

<v-select>コンポーネントにtaggableを設定することで、入力した値をタグとして設定することができます。

<v-select :options="options" v-model="selected" multiple taggable></v-select>

>>専用ページで確認する

まとめ

記事を書きながら色々テストしていましたが、このライブラリは便利過ぎてヤバイです。

使用用途が有りすぎて業務で使うのが楽しみになってきました。

興味がありましたら、ぜひ試してみてください。