チェックボックス(input[type=”checkbox”])を操作する [Vue.js]

Vue.js The Progressive JavaScript Framework

Webアプリケーションでは、チェックボックスを使用してユーザーのオプション選択を取得することがよくあります。
例えば、アンケートアプリで該当する項目を選択させたり、ユーザー情報登録アプリでユーザーの状態を選択させたりする場合です。

Vue.jsではチェックボックス(type属性に”checkbox”を指定したinput要素)をv-modelディレクティブを使用することで簡単に操作することができます。

v-modelディレクティブを使うと、フォームの入力コントロール(要素)に双方向(two-way)データバインディングを実装できます。

今回は、Vue.jsでチェックボックスを操作する方法について紹介します。

v-modelディレクティブ

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

チェックボックス(input[type=”checkbox”])にv-modelでデータをバインドすると以下のようになります。

v-modelディレクティブは、チェックボックスが持つcheckedプロパティとchangeイベントにバインドされます。
v-modelは糖衣構文(syntax sugar)で、v-bindディレクティブでcheckedプロパティにバインドし、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ディレクティブ ユーザーからの操作を受け付ける...

チェックボックス(input[type=”checkbox”])にデータをバインドする

ここでは簡単な例を通して、input要素のtype属性にcheckboxを指定したチェックボックスにデータをバインドします。

まず、HTMLテンプレートにtype属性にcheckboxを指定したinput要素を配置します。

次に、JavaScript(プログラムのスクリプト)にチェックボックスにバインドするデータを定義します。

JavaScript側にデータが準備ができたら、HTMLテンプレートに定義したinput要素にv-modelディレクティブを使用してデータをバインドします。

ここではバインドしたデータが画面のチェックボックスを操作することで変更されることを確認するために、{{}}(マスタッシュ構文)を使用してデータの値を表示しています。

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

Vue.js チェックボックス(input type="text")にデータをバインドしたサンプルの実行結果

画面のチェックボックスをクリックしてチェックを付ける(選択する)と、それに伴ってチェックボックスにバインドしているデータの値が変更され、双方向データバインディングができていることが確認できます。

Vue.js チェックボックス(input type="text")にデータをバインドしたサンプルの実行結果

複数のチェックボックスにデータバインドする

複数のチェックボックスにバインドするデータは配列で定義します。
JavaScript

HTML

コードの実行結果は以下のようになります。

Vue.js 複数チェックボックス(input type="text")にデータをバインドしたサンプルの実行結果

チェックボックスをクリックしてチェックを付ける(選択する)と、以下のように配列にデータが格納されることが確認できます。

Vue.js 複数チェックボックス(input type="text")にデータをバインドしたサンプルの実行結果
配列には、クリックしてチェックを付けた順番に値が格納されます。
上記の例では、選択肢3、選択肢1の順にクリックして選択しています。

チェックボックスのチェックが変更されたイベントを処理する

v-modelディレクティブでデータをバインドしたチェックボックスのチェック状態が変更されたイベントを処理する際は、changeイベントを使用します。

以下に簡単な例を示します。
ここでは、changeイベントにバインドするメソッドで、コンソールログにチェック値を出力しています。

JavaScript

HTML

チェックボックスにバインドしたデータ(値)が変更された時の処理を行う際には、changeイベントを使用することに注意してください。
チェックボックスが持つclickイベントやinputイベントでは、チェック値が正しく取得できないので、必ずchangeイベントを使用するようにしてください。

Vue.js 入門 Tips 一覧