【Vuetify】【v-select】セレクトボックスの実装方法と使い方

こんにちは、Ryohei（@ityryohei）です！

本記事では、Vuetifyのv-selectコンポーネントでセレクトボックスを実装する方法と簡単な使い方についてご紹介しています。

上記の疑問にお答えします。

本記事では、下記バージョンのVue.jsとVuetifyを使用しています。動作しない場合はバージョンをご確認ください。

• Vue.js：v2.6.14
• Vuetify：v2.5.9

では、解説していきます。

v-selectコンポーネントを使用する

Vuetifyでセレクトボックスを実装する場合はv-selectコンポーネントを使用します。使い方は簡単で、セレクトボックスを配置したい箇所にv-selectコンポーネントを記述するだけです。

<v-select></v-select>

上記を追記してページを更新すると下記のように空のセレクトボックスが作成されます。

See the Pen Untitled by ryohei (@intotheprogram) on CodePen.

上記にselect要素でいうoption要素やVuetifyのプロパティを追加することでセレクトボックスを実装していきます。

v-selectでセレクトボックスを実装する

実際にv-selectコンポーネントでセレクトボックスを実装してみます。v-selectでよく使用するオプションリストの設定、ラベルの設定、スタイルの変更、inputの高さを低くする方法をご紹介します。

オプションリストを設定する

オプションリストはv-selectのitemsプロパティの値に配列を指定することで設定することができます。select要素でいうところのoption要素のような扱いになります。

HTML

<v-select
    :items="items"
></v-select>

JavaScript

new Vue({
    el: '#app',
    vuetify: new Vuetify(),
    data: () => ({
        items: ['Vue.js', 'React', 'Angular', 'Buzz'],
    }),
})

下記に実行結果を用意しました。セレクトボックスを展開すると、上記のitemsに設定した値が出力されていることがご確認いただけます。

実行結果

See the Pen 7315 by ryohei (@intotheprogram) on CodePen.

ラベルを設定する

セレクトボックスにラベルを設定します。ラベルはセレクトボックスのタイトルのような役割となります。

HTML

<v-select
    :items="items"
    label="Framework"
></v-select>

JavaScript

new Vue({
    el: '#app',
    vuetify: new Vuetify(),
    data: () => ({
        items: ['Vue.js', 'React', 'Angular', 'Buzz'],
    }),
})

実行結果

See the Pen Untitled by ryohei (@intotheprogram) on CodePen.

スタイルを変更する

セレクトボックスのスタイルを変更します。Vuetifyでは、下記のスタイルをサポートしています。

スタイル名	説明
指定不要	デフォルトのスタイル
filled	セレクトボックスに背景色を付ける
outlined	セレクトボックスにアウトラインを付ける
solo	セレクトボックスに影を付ける

スタイルを変更する場合はv-selectコンポーネントのプロパティにスタイルを指定します。

HTML

<v-select
    :items="items"
    filled
></v-select>

それぞれのスタイルは下記の実行結果から確認することができます。

実行結果

See the Pen Untitled by ryohei (@intotheprogram) on CodePen.

アイテムの高さを低くする

セレクトボックスのアイテムの高さを低くするにはdenseプロパティを指定します。

HTML

<v-select
    :items="items"
    dense
></v-select>

JavaScript

new Vue({
    el: '#app',
    vuetify: new Vuetify(),
    data: () => ({
        items: ['Vue.js', 'React', 'Angular', 'Buzz'],
    }),
})

denseプロパティを指定した場合と指定しない場合の実行結果を用意しました。半分程度の高さになっているかと思います。

実行結果

See the Pen Untitled by ryohei (@intotheprogram) on CodePen.

他のプロパティを確認するには

v-selectコンポーネントにはまだまだ多くのプロパティが存在します。下記ドキュメントで一覧で紹介されていますので、実装される場合は参考にしてみてくださいね。

参考：https://vuetifyjs.com/ja/api/v-select/

最後に

v-selectを実際に使用する場合は、スクリプト側でイベントの設定等が必要になりますが、本記事では見た目の部分にフォーカスして実装方法について簡単にご紹介させていただきました。少しコーディングするだけで見た目にきれいなセレクトボックスを実装することができるので、ぜひ使用してみてくださいね。

以上、Vuetifyのv-selectでセレクトボックスの実装する方法と使い方のご紹介でした！