こんにちは、まるやまです。
現在仕事でVue.jsを使っていますが、最近そのVue.js用のselectコンポーネントをいくつか試してみたので使った感じや、問題点をまとめてみました。
vue-select
まずはvue-selectです。
使い方の例
<template>
<div>
{{selected}}
<v-select :value.sync="selected" :options="options" multiple ></v-select>
</div>
</template>
<script>
import vSelect from 'vue-select'
export default {
components: {vSelect},
data() {
return {
selected: null,
options: ['ねこ','うし','いぬ','ぞう','とら','うま']
}
}
}
</script>
主なパラメータ
searchable：補完入力の有効／無効を切り替える。デフォルトはtrue。
multiple：複数選択の有効／無効を切り替える。デフォルトはfalse。
最低限必要な機能はありますが、一つ欠点があります。
options（選択肢）が日本語のとき、入力補完機能で途中まで文字を打ってEnterを押すと、そのときの選択候補の中の一番上の選択肢が自動的に選択されてしまいます。
例えば上の使い方の例では、「う」と打った時点でEnterを押したとします。この時点では「うし」と「ぞう」と「うま」の3つが候補として出てきてほしいところですが、実際には「うし」が自動的に選択されてしまいます。
このようなことがあるので、選択肢に日本語が無いような場合であればシンプルに使えるこちらを使っても特に問題はないと思います。
vue-strap
つぎはvue-strapのselectです。
使い方の例
<template>
<div>
{{selected}}
<vs-select :value.sync="selected" :options="options" multiple search clear-button></vs-select>
</div>
</template>
<script>
import VueStrap from 'vue-strap'
export default {
components: {vsSelect: VueStrap.select},
data() {
return {
selected: null,
options: [
{value: 1, label: 'ねこ'},
{value: 2, label: 'うし'},
{value: 3, label: 'いぬ'},
{value: 4, label: 'ぞう'},
{value: 5, label: 'とら'},
{value: 6, label: 'うま'}
]
}
}
}
</script>
主なパラメータ
search：補完入力を有効にする。
multiple：複数選択を有効にする。
disabled：selectの操作を無効にする。
clear-button：クリアボタン（☓ボタン）を有効にする。
close-on-select：選択肢から１つ選択する度に選択肢を閉じる。
vue-strapのselectにはvue-selectと比べてパラメータが豊富なので、細かい設定ができます。vue-selectにあった日本語問題もこちらは大丈夫です。またvue-strapにはselect以外にもDropdownやRadioButtonなど様々な機能があるのもお薦めです。
ただ細かい点ですが、補完入力と複数選択を有効にしたときに、キーボードのカーソル（↑↓）での選択が出来なかったので、操作性が若干微妙でした。
vue-multiselect
最後はvue-multiselectです。
使い方の例
<template>
<div>
{{selected}}
<multiselect :selected="selected" :options="options" :multiple="true" @update="updateSelected"></multiselect >
</div>
</template>
<script>
import Multiselect from 'vue-multiselect'
export default {
components: {Multiselect},
data() {
return {
selected: null,
options: ['ねこ','うし','いぬ','ぞう','とら','うま']
}
},
methods: {
updateSelected (newSelected) {
this.selected = newSelected
}
}
}
</script>
主なパラメータ
searchable：補完入力を有効にする。デフォルトはtrue。
multiple：複数選択を有効にする。デフォルトはfalse。
hide-selected：すでに選択済みのものを選択肢から隠す。デフォルトはfalse。
close-on-select：選択肢から１つ選択する度に選択肢を閉じる。デフォルトはtrue。
allow-empty：trueの場合、選択されたものを全て消す（未選択の状態にする）ことができる。falseの場合は選択状態のものが最低一つ残る。デフォルトはtrue。
こちらも多くのパラメータがあります。またイベントも多く用意されていて、使い方の例にある@updateイベントは、selectのvalueが変更されたときに指定されたメソッドにvalueを引数として渡して呼び出します。 その他にも選択したときに呼び出される@selectイベントや、選択したものを消すときに呼び出される@removeイベントなどがあります。 今回紹介した中では一番多くの機能を持ち、出来ることも多いのはこのvue-multiselectですが、逆に機能がありすぎて、他の２つより使い方が少しだけ複雑になっている気がしました。
