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

2019年5月31日

vue-selectとは

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

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

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

 

【動画サイズ:273KB】

 

環境

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

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リポジトリは以下から取得できます。

 

導入手順

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

 

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
2
Vueインスタンスを設定


上記で取得した  vSelectVue.componentに取り込みます。

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>

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

 

選択数を制限する

複数選択を可能にした時に、選択できる個数を制限することができます。

 

 

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>

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

 

まとめ

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

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

 

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

 

  • この記事を書いた人

カバノキ

印刷会社のWEB部隊に所属してます。 WEB制作に携わってから、もう時期10年になります。 普段の業務では、PHPをメインにサーバーサイドの言語を扱っています。 最近のお気に入りはJavascriptです。 Vue.jsを狂喜乱舞しながら、社内に布教中です。

-vue.js
-, , ,