見出し画像

Vue Selectを使って簡単に候補選択・複数選択できるセレクトボックスを実装

Vue Selectというライブラリを使ってみて、とても便利だったので使い方を簡単に紹介します!

概要

Vue Selectとは検索時の候補表示や、複数選択など検索時に便利なVue.jsライブラリです。

スクリーンショット 2020-05-22 18.37.23

依存性もなく、vue-selectのみで動作します。

インストール

yarn add vue-select
# or, using NPM
npm install vue-select

インストールしたらコンポーネントにimportします

import vSelect from 'vue-select'

コンポーネント自体にはCSSが含まれていないので、下記を追加します。

// javascriptに追加する場合
import 'vue-select/dist/vue-select.css';

// CSSに追加する場合
​@import "vue-select/src/scss/vue-select.scss";

基本の使い方

検索の候補を出すには、VueSelectのoptionに配列(React, Vue.js, Laravel...)をバインドします。

スクリーンショット 2020-05-22 18.49.13

<div id="app">
 <h1>Vue Select Sample</h1>
 <v-select :options="options" v-model="selected"/>
</div>

v-modelしているのでVue.jsを選択するとselectedには "Vue.js" という文字列が入ります。

Vue.component("v-select", VueSelect.VueSelect);
new Vue({
 el: "#app",
 data: {
   selected: null,
   options: ["React","Vue.js","Laravel",]
 },
});

表示するlabelとvalueの値を変える方法

先程は選択した値がそのままselectedに入りました。

optionsに { id: 1, name: React } を指定したとき、表示はReact・selectedにはid: 1を入れたい場合があります。そんなときは label と reduce を使います。

// options
[
 { name: "React", id: 1 },
 { name: "Vue.js", id: 2 },
 { name: "Laravel", id: 3 },
 { name: "React Native", id: 4 }
]

// template
 <h1>Vue Select Sample</h1>
 <v-select
   :options="options"
   label="name"
   v-model="selected"
   :reduce="options => options.id"
 />

複数選択を可能にする方法

v-select タグに multiple を指定するだけです。

<v-select
   multiple
   :options="options"
   label="name"
   v-model="selected"
   :reduce="options => options.id"
   @input="(val) => console.log(val)"
/>

これで複数選択が可能になります。

スクリーンショット 2020-05-22 20.48.46

選択したタイミングで @input が発火するのでconsole.log(val) が下記のように配列で表示されます。

スクリーンショット 2020-05-22 20.52.28

ローディング スピナーを表示させる方法

optionsに指定するデータをAPIから取得したい場合など、通信中はローディング スピナーを表示させることができます。

スクリーンショット 2020-05-22 20.57.12

v-selectのloadingにスピナーを表示させる条件をBooleanで指定し、slotにスピナーを指定(template部分をコピペしてください)します。

<v-select
   multiple
   :loading="options.length <= 0"
   v-model="selected"
   :options="options"
   :reduce="options => options.id"
   key="id"
   label="name"
   @input="onInput"
   placeholder="Filter Skills ..."
>
   <template #spinner ="{ loading }">
       <div v-if="loading" class="vs__spinner"/>
   </template>
</v-select>

スピナーの色を変更したい場合はborder-left-colorを指定します。

.vs__spinner {
  border-left-color: rgba(88,151,251,0.71)
}

CodePen

実際のコードをCodePenに公開しているので、ご参考ください。

Vue.jsの基本的な使い方については、下記の本がおすすめです。

初心者はこっち



この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!
note.user.nickname || note.user.urlname

息抜きのコーヒー代にさせて頂きます!!♡

励みになります!
16
2年くらいWebエンジニアしてます。勉強したことをつらるページ₍ ᐢ. ̫ .ᐢ ₎ たまにもくもく会やったり→https://prog-9.connpass.com/ 趣味はお笑いラジオと西洋音楽と西洋美術👩‍🎨

こちらでもピックアップされています

アウトプット
アウトプット
  • 644本

ゆめみの【勉強し放題制度】を活用したアウトプット、その他に、メンバーが自分自身で学んだことをまとめています。 ゆめみの独自制度である「勉強し放題制度」は、あらゆる学習費用を100%会社が負担します。書籍、社外セミナー、実験機材、認定資格の受験など、成長のためのコストは会社が全て負担。また、業務時間の10%は自由な活動に使うことができます。

コメントを投稿するには、 ログイン または 会員登録 をする必要があります。