Vue.js の基本 (3)

前回、テキストボックス、ラジオボタン、セレクトボックスについて、UI 要素と JavaScript のデータがひもづく-バインディングされる様を確認しました。

UI 要素には他にも、複数のデータとひもづくものがあります。チェックボックス、複数選択セレクトボックスなどです。

古典的な仕組みでは、name 属性に同じ値を持たせた複数の input を用意してサブミットすることで、サーバサイドではそれらを配列として扱うことが多いかと思います。例えばこうです。

<input type="checkbox" name="gender[]" value="female" />
<input type="checkbox" name="gender[]" value="male" />
<input type="checkbox" name="gender[]" value="other" />

こうすると、PHP では

$selected = $_POST['gender']; // $selected には選択したものが配列でセットされる

となります。

ちなみに、ここからHTTPレスポンスを返すとき、チェック状態を復元する必要があることが多いですが、PHP のみの機能では、それを実現するのは結構面倒です。
データにしたがって適切に checked 属性をつけた HTML コードを生成しなければならないからです。
これはこのシチュエーションに限った話ではなく、最初に表示するとき登録されているデータにもとづいてチェック状態をセットするとか、セレクトボックスの選択状態、テキストボックスの初期値など、データにもとづいて UI 要素を表示するためには必要なことになります。

これが Vue.js では、このようになります。

JavaScript の方は、data に genders という配列があります。

HTML では、それぞれのチェックボックスに v-model 属性を使用して genders がバインドされています。

span は、genders の中身を表示する部分です。詳細は割愛しますが、genders の中身をループして表示しています。

これを動かしてみると、チェックボックスの状態によって、genders の内容がリアクティブに変化していることがわかります。チェックされたチェックボックスの value 値が、バインドされた genders の配列の要素となっています。

これにより、表示する際のチェックボックスの復元も簡単に実現できます。単に、チェックをつけたい値が配列に設定されていればよいのです。
最初に male をチェック状態にしたいならば、

data: {
  genders: ['male']
}

のようにすればよいだけです。