vue-selectでいい感じのセレクトボックスを実装する

HTMLとCSSでセレクトボックスの装飾をするの意外と面倒ですよね。
なんとか簡単にセレクトボックス作れないかな〜〜と調べたら、ありました。
僕はvue.jsをよく使うので「vue-select」という良さそうなライブラリを使ってみます。

vue-selectをインストールする

vue-selectをインストールします。

npm install vue-select

vue-selectをインポートします

僕はLaravelとVueを使っているので、app.jsでインポートします

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

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

vue-selectでセレクトボックスを作ってみます

v-selectのコンポーネントを使用して、セレクトボックスを作ります。

optionsにセレクトボックスの項目を適用して、v-modelに選択中の値を入れるようにします。

<div id="app">
  <v-select name="selectbox" :options="options" v-model="selectedValue"></v-select>
</div>

.
.
.

  data: {
    selectedValue: '',
    options: [
      {label: '項目1', code: 1},
      {label: '項目2', code: 2},
      {label: '項目3', code: 3},
      {label: '項目4', code: 4},
    ]
  }

これだけでvue-selectでセレクトボックスが使えるようになります！

例えばセレクトボックスの幅とか背景色とかを変更したい場合はv-selectクラスにCSSを適用してあげればOKです。柔軟にスタイルを変更できて嬉しいですね。

.v-select {
    width: 60%;
    background-color: white;
}

以上で、vue-selectの使い方でした。

柔軟にスタイルも変更できて、簡単にセレクトボックスが構築できて、簡易的に書けるので嬉しいですね！