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

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

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

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

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

1 v-modelディレクティブ
2 セレクトボックス（select）にデータバインドする
3 項目を複数選択できるセレクトボックスにデータバインドする

v-modelディレクティブ

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

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

<select v-model="データ">

1	<select v-model="データ">

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

<select v-bind:checked="データ"
        v-on:change="イベントメソッド" />

1 2	<select v-bind:checked="データ" v-on:change="イベントメソッド" />

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

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

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

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

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

<div id="app">
  <select>
    <option>item1</option>
    <option>item2</option>
    <option>item3</option>
  </select>
</div>

</select>

</div>

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

Vue.createApp({
  data: function() {
    return {
      selected: ''
    }
  }
}).mount('#app')

Vue.createApp({

data: function() {

return {

selected: ''

}

}).mount('#app')

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

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

<div id="app">
  <select v-model="selected">
    <option>item1</option>
    <option>item2</option>
    <option>item3</option>
  </select>
  <div>選択項目: {{selected}}</div>
</div>

</select>

<div>選択項目: {{selected}}</div>

</div>

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

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

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

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

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

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

HTML

<div id="app">
  <select v-model="selected multiple">
    <option>item1</option>
    <option>item2</option>
    <option>item3</option>
  </select>
  <div>選択項目: {{selected}}</div>
</div>

</select>

<div>選択項目: {{selected}}</div>

</div>

JavaScript

Vue.createApp({
  data: function() {
    return {
      selected: []
    }
  }
}).mount('#app')

Vue.createApp({

data: function() {

return {

selected: []

}

}).mount('#app')

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

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

Vue.js 入門 Tips 一覧

リンク