【解説】Vue.jsでチェックボックスを動的に変える【単体／複数】

パソ君

・Vue.jsでチェックボックスを動的に変える方法は？

こんな疑問にお答えします。

フォーム部分で「v-model」を用いて動的に変えたい場合がありますよね。

今回は自分用のメモとして「チェックボックス」の動的に変更する方法をまとめてみました！

ジト

参考にどうぞ

ということで、この記事では「Vue.jsでチェックボックスを動的に変える」について解説していきます！

2024年5月19日 【解説】Vue.jsのv-modelの使い方【サンプルコードあり】

【解説】Vue.jsでチェックボックスを動的に変える【単体】

単体の型は「boolean値」

チェックボックスを単体で表示するときは「boolean値」となります。

ようは真偽値ですね。

そのためtrueまたはfalseの値を持ちます。

サンプル例

実際に単体チェックボックスをv-modelで動的に変えるサンプルを作ってみました。

See the Pen vue　チェックボックス単体 by jito-coder (@jito-coder) on CodePen.

チェックが入ると「true」になり、外れると「false」になりますよね。

<div id="app">
  <label for="checkbox">{{ checkitem }}</label>
  <input type="checkbox" id="checkbox" v-model="checkitem">
</div>

const app = Vue.createApp({
  data: () => ({
    checkitem: false
  })
}).mount('#app')

「v-model」を使って「checkitem」を双方向データバインディングします。

そしてlabelタグの中にマスタッシュ構文にて「checkitem」をいれて紐づけしました。

【解説】Vue.jsでチェックボックスを動的に変える【単体】

複数の型は「配列」

チェックボックスを複数使うときの型は「配列」です。

初期値は空配列にして、同一の「v-model」の値を使用。

サンプル例

実際に複数チェックボックスをv-modelで動的に変えるサンプルを作ってみました。

See the Pen vue　チェックボックス複数 by jito-coder (@jito-coder) on CodePen.

チェックした要素が、下部分に追加されていきますよね。
そしてチェックを外すと、削除されるかと。

<div id="app">
  <!-- 1つ目 -->
  <label for="apple">りんご</label>
  <input type="checkbox" id="apple" value="りんご" v-model="fruits">
  <!-- 2つ目 -->
  <label for="orange">オレンジ</label>
  <input type="checkbox" id="orange" value="オレンジ" v-model="fruits">
  <!-- 3つ目 -->
  <label for="peach">もも</label>
  <input type="checkbox" id="peach" value="もも" v-model="fruits">
  <!-- 出力用 -->
  <p>{{ fruits }}</p>
</div>

const app = Vue.createApp({
  data: () => ({
    fruits: []
  })
}).mount('#app')

複数のチェックボックスの場合、注意点があります。

順に見ていきましょう。

※valueの値を入れておく

複数の場合は、value属性に値を入れておきましょう。

下記の例だと「りんご」ですね。

<input type="checkbox" id="apple" value="りんご" v-model="fruits">

※初期値は空配列

「v-model」で設定している値は、空の配列にしておきましょう。

const app = Vue.createApp({
  data: () => ({
    fruits: []
  })
}).mount('#app')

【解説】Vue.jsでチェックボックスを動的に変える【単体／複数】：まとめ

ジト

Vue.jsでチェックボックスを使う時はためしてみてね！

2024年6月2日 【解説】Vue.jsでラジオボタンを動的に使う【サンプルあり】

2024年6月2日 【解説】Vue.jsでセレクトボックスを動的に使う【単体／複数】

2024年6月2日 【解説】Vue.jsでテキストエリアをバインディングする方法

コーディング知識を
『チート級』に得れる教材を作成！

見てみる⋙