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

2019年5月31日 2020年5月28日

vue-selectとは

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

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

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

環境

Vue.js	2.6.10
vue-select	3.1.0

インストール

以下のnpm、yarn、CDNのどれか一つを使ってインストールします。

npm

npm install vue-select

yarn

yarn add vue-select

CDN

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

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

https://github.com/sagalbot/vue-select

導入手順

1. ライブラリの取り込み

1.1 npm / yarn

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

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

1.2 CDN

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

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

2. テンプレートで、v-selectディレクティブを使用します。

v-modelで値を取得することができます。

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

デモ

IE11ですとJSFiddleが動作しません（調査中）

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

オプション

マルチプル

multiple を設定することで複数を選択できるようになります。

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

IE11ですとJSFiddleが動作しません（調査中）

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

タグ付け

taggable を設定することでオプション内に存在しない入力を許可します。

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

IE11ですとJSFiddleが動作しません（調査中）

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

まとめ

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

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

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

カバノキ