・Vue.jsでチェックボックスを動的に変える方法は？
こんな疑問にお答えします。
フォーム部分で「v-model」を用いて動的に変えたい場合がありますよね。
今回は自分用のメモとして「チェックボックス」の動的に変更する方法をまとめてみました！
参考にどうぞ
ということで、この記事では「Vue.jsでチェックボックスを動的に変える」について解説していきます！
Vue.jsでチェックボックスを動的に変える【単体】
Vue.jsでチェックボックスを動的に変える【複数】
【解説】Vue.jsのv-modelの使い方【サンプルコードあり】 目次
【解説】Vue.jsでチェックボックスを動的に変える【単体】
チェックボックスを単体で表示するときは「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でチェックボックスを動的に変える【単体／複数】：まとめ
- 単体の型は「boolean値」
- 複数の型は「配列」
※初期値は空配列にする
※valueの値を入れておく
Vue.jsでチェックボックスを使う時はためしてみてね！
【解説】Vue.jsでラジオボタンを動的に使う【サンプルあり】 
【解説】Vue.jsでセレクトボックスを動的に使う【単体／複数】 
【解説】Vue.jsでテキストエリアをバインディングする方法
