ログイン
問題3

フォーム入力バインディングを学ぼう! Value編

アイコン画像

問題3:フォーム入力バインディングを学ぼう! 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¥
              

ブラウザのアイコン期待する画面

タグアイコン解答ソースコード

              <script>
  const vm = new Vue({
    el: "#app",
    data: {
      checked: false,
      selectedValues: []
    }
  });
</script>
¥Vue¥
            

コメントのアイコン解説

チェックボックスの入力とデータの値の結びつけも
テキストエリアと同様に'v-model'を用いるぞ。
データの値を真偽値とすることで、チェックボックスの入力のchecked属性と結びつけることができる。
また、データの値を配列とすることで、複数のチェックボックスのvalue属性と結びつけることができる。
ログインして解答を見る
完了にする!
twitterのアイコン
活動記録をTweetする

LINE登録で、Web制作に役立つコンテンツ配信中‼

LINEの友達追加でお役立ち動画をGET!!
LINEの友達追加でお役立ち動画をGET!!