セレクト(選択)ボックス(select)を操作する [Vue.js]

Vue.js The Progressive JavaScript Framework

Webアプリケーションでは、ユーザーに項目を選択させるためにselect要素でセレクトボックス(選択ボックス)を利用することがよくあります。

Vue.jsには、フォームの入力コントロール(要素)に双方向(two-way)データバインディングを実装するためにv-modelディレクティブが用意されています。

v-modelディレクティブを使えば、セレクトボックスを簡単に操作することができます。

今回は、Vue.jsでselect要素のセレクトボックスを操作する方法について紹介します。

v-modelディレクティブ

v-modelディレクティブは、JavaScript(Vueのインスタンス)で定義したデータをフォームのセレクトボックスに双方向にバインドします。
双方向にデータをバインドすることで、Vueのインスタンスに定義してデータを変更することで画面(UI)のデータを更新し、画面のデータを変更するすることでVueインスタンスのデータを更新することができます。

セレクトボックスにv-modelでデータをバインドすると以下のようになります。

v-modelディレクティブは、セレクトボックスが持つvalueプロパティとchangeイベントにバインドされます。
v-modelは糖衣構文(syntax sugar)で、v-bindディレクティブでvalueプロパティにバインドし、v-onディレクティブでchangeイベントにバインドした場合と同様の動作になります。

v-modelディレクティブについては、以下の記事にまとめていますので、参考にしてください。

v-modelディレクティブでフォームの入力要素と双方向データバインディング [Vue.js]
本記事では、Vue.jsのv-modelディレクティブについて紹介します。 v-modelディレクティブ ユーザーからの入力...

v-bindディレクティブ、v-onディレクティブについても、以下の記事にまとめていますので、参考にしてください。

v-bindディレクティブでHTML要素の属性にバインドする [Vue.js]
本記事では、Vue.jsのv-bindディレクティブについて紹介します。 v-bindディレクティブ HTMLの要素はcla...
v-onディレクティブでイベントの処理(メソッドや式)をバインドする [Vue.js]
本記事では、Vue.jsのv-onディレクティブについて紹介します。 v-onディレクティブ ユーザーからの操作を受け付ける...

セレクトボックス(select)にデータバインドする

ここでは簡単な例を通して、セレクトボックスにデータをバインドします。

まず、HTMLテンプレート側にselect要素(セレクトボックス)を配置します。

次に、JavaScript側のVueインスタンスにセレクトボックスにバインドするデータを定義します。

ここでは、dataオプションにselectedというプロパティを定義しています。

バインドするデータを定義したら、HTMLテンプレートのselect要素にv-modelディレクティブでデータをバインドします。

ここではセレクトボックスにバインドした値(dataオプションに定義したselectedプロパティ)を可視化するために、{{}}(マスタッシュ構文)を使用してdiv要素に値を表示しています。
これで画面からセレクトボックスが操作されて選択項目が変更されると、バインドした値が変更されるのが確認できます。

上記のサンプルコードを実行すると、以下のような画面が表示されます。

Vue.js セレクトボックス(select)にデータをバインドしたサンプルの実行結果

画面からセレクトボックスを操作して項目を選択すると、以下のように選択した値がセレクトボックスの下に表示されることが確認できます。

Vue.js セレクトボックス(select)にデータをバインドしたサンプルの実行結果(画面から選択項目を変更)

項目を複数選択できるセレクトボックスにデータバインドする

属性にmultipleを指定したselect要素で、複数の項目を選択できるようにしたセレクトボックスでもバインドの仕方は同様です。

以下に複数の項目が選択できるセレクトボックスのコード例を示します。

HTML

JavaScript

属性にmultipleを指定した場合は複数の項目が選択できるようになるため、バインドするデータには配列を定義します。

Vue.js 複数の項目を選択できるセレクトボックス(select [multiple])にデータをバインドしたサンプルの実行結果

画面のセレクトボックスで項目を選択すると、次のように配列にデータが格納されます。

Vue.js 複数の項目を選択できるセレクトボックス(select [multiple])にデータをバインドしたサンプルの実行結果(画面から選択項目を変更)

Vue.js 入門 Tips 一覧