問題
3
Vue
フォーム入力バインディングを学ぼう！ Value編
Vueの問題に挑戦しよう！
問題
「フォーム入力バインディングを学ぼう！ Value編」
今度はチェックボックスの入力を監視しよう。
単体のチェックボックスの入力は真偽値で、複数のチェックボックスの入力は配列で取得してほしい。
チェックボックスの入力とデータの値の結びつけにもv-modelを用いる。
あらかじめエディタに書くコード
<div id="app">
<p>{{ checked }}</p>
<input type="checkbox" v-model="checked">
<p>{{ selectedValues }}</p>
<label for="one">1</label>
<input type="checkbox" id="one" value="1" v-model="selectedValues">
<label for="two">2</label>
<input type="checkbox" id="two" value="2" v-model="selectedValues">
<label for="three">3</label>
<input type="checkbox" id="three" value="3" v-model="selectedValues">
</div>
¥Vue¥
期待する画面
解答と解説
解説
LINE登録して解答を見る
※ご登録後すぐに解答閲覧用URLが
LINEで届きます
チェックボックスの入力とデータの値の結びつけも
テキストエリアと同様に'v-model'を用いるぞ。
データの値を真偽値とすることで、チェックボックスの入力のchecked属性と結びつけることができる。
また、データの値を配列とすることで、複数のチェックボックスのvalue属性と結びつけることができる。
