Vue Selectの簡単な使い方まとめ

Vue.jsでプルダウン形式のコントロールを実装できるVue Selectを使う際のメモ。

公式ドキュメント

使い方

HTML

<div id="app">
　<v-select v-bind:options="options" v-model="selected" :loading="options.length <= 0"></v-select>
　<p>値：{{selected}}</p>
</div>

JavaScript

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

new Vue({
  el: '#app',
  data: {
    options: ["選択肢１","選択肢２"],
    selected: '',
  }
})

v-selectにバインドされたoptions配列の中身がプルダウン形式で選択できる。
選択した値はselectedにアクセスすることで参照できる。
loadingオプションを指定することで、選択肢をバックグラウンドで取得している間などにローディングマークを表示できる。

CodePenサンプル(CSSは公式テンプレートのまま)

See the Pen Vue Select Sample by shoito66 (@shoito66) on CodePen.