「vue-select」で高機能なセレクトボックスを実装する

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>

 

デモ

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

 

オプション

マルチプル

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

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

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

 

タグ付け

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

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

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

 

 

まとめ

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

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

 

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