【Vue.js】v-modelでチェックボックスを管理してみましょう

2021年12月19日
Vue.js
Javascript, Vue.js

Vue.js

今回の記事は、

これからVue.jsを始めてみたい
v-modelの使い方が知りたい
チェックボックスでv-modelを使ってみたい

という方に向けた記事になっています。

なお、Vue.jsの概要や特徴については以下の記事にて詳しく解説していますので、こちらもぜひご覧ください。

おすすめ記事

【Vue.js入門】Vue.jsとは？その特徴やメリットを丁寧に解説します！

今回の記事は、最近よく聞くけど、Vue.jsってなに？これからVue.jsを始めてみたいVue.jsの特徴やメリットが知りたいというお悩みをお持ちの方に向けた記事になっています。 ReactやAngular、そしてV[…]

フリーランス案件を探すならこのエージェント！


運営会社	レバテック株式会社	株式会社Branding Engineer	株式会社Hajimari
対応エリア	東京・神奈川・埼玉・千葉大阪・兵庫・京都・愛知・福岡	東京・神奈川・埼玉・千葉大阪・兵庫・京都・奈良・和歌山・滋賀	東京・神奈川・埼玉・千葉茨城・大阪・兵庫・福岡
案件数	約28,000件	約3,300件	約4,200件
平均単価	68.2万円	72.2万円	–
最高月収	145万円	200万円	176万円
特徴	・高単価な案件が多い・福利厚生サービスが受けられる・首都圏の案件が中心	・給与保証制度で安定した収入を得られる・税務処理のサポートあり・マージン率は実質20%	・週2/週3の案件が多い・在宅/リモート案件が多い・スタートアップ企業やベンチャー企業の案件が多い
紹介企業例	・株式会社Gunosy ・株式会社バンダイナムコホールディングス・株式会社ユーザベース	・Sansan株式会社・株式会社一休・株式会社FiNC Technologies など	・クックパッド株式会社・株式会社カオナビ・株式会社Kaizen Platform など
説明記事	説明記事はこちら	説明記事はこちら	説明記事はこちら
公式サイト	公式サイトへ	公式サイトへ	公式サイトへ

転職を考えているならこのエージェント！


運営会社	レバテック株式会社	株式会社Branding Engineer	株式会社リブセンス
対応エリア	東京・神奈川・埼玉・千葉大阪・兵庫・京都・愛知・福岡	東京・神奈川・埼玉・千葉大阪・兵庫・京都・奈良・和歌山・滋賀	東京・神奈川・埼玉・千葉茨城・大阪・兵庫・福岡
案件数	約13,000件	約800件 ※非公開求人が多い	– ※ドラフト制のため、対象外
年齢層	20代：◎ 30代：〇 40代：〇	20代：〇 30代：〇 40代：△	20代：〇 30代：〇 40代：〇
特徴	・エンジニア・デザイナーを専門としている・カウンセリングに時間をかける・年収アップ率60％の実績	・IT/Web/ゲーム業界専門の転職エージェント・業界経験者がキャリアコンサルタントを務める・丁寧なカウンセリングで入社後の離職率1%以下を実現	・ドラフト制による採用を叶える特殊なサービス・スキル・経験重視で評価してもらえる・他エンジニアの入札結果を見ることで自分の市場価値が分かる
紹介企業例	・サイボウズ株式会社・株式会社サイバーエージェント・Chatwork株式会社など	・DMM.com ・Money Forward ・SmartHR など	・メルカリ・ZOZOテクノロジーズ・freee など
説明記事	説明記事はこちら	説明記事はこちら	説明記事はこちら
公式サイト	公式サイトへ	公式サイトへ	公式サイトへ

1 v-modelディレクティブとは？
2 【Vue.js】チェックボックスでv-modelを使用する方法
3 最後に

v-modelディレクティブとは？

まず初めに、v-modelディレクティブの概要についておさらいしておきましょう。

v-modelディレクティブは、主にformのinput / textarea などの要素に使用され、View側（HTML）とModel側（Vue.js）との間でデータの双方向バインディングを実現する仕組みでしたね。

ここで出てきた「双方向バインディング」というのは、View側とModel側とで常にデータを繋ぎ続ける（バインドし続ける）ということであり、具体的に申し上げると、「HTML上で変更したデータがVue.js側にも反映され、逆に何かしらのアクションでVue.js側のデータが変更された場合にはその変更がHTML側にも反映される」ということです。

このv-modelディレクティブを使用することで、フォームの入力値を簡単に管理することができ、これまでの素のJavascriptやjQueryでのやり方と比べて開発効率を格段にあげることができます。

基本的な使い方や実際の具体例については以下の記事にて詳しく解説していますので、ぜひこちらもご覧くださいね。

【Vue.js】チェックボックスでv-modelを使用する方法

通常のinputタグに使用する場合と比べて注意すべき点は、「Vueオブジェクトのdataプロパティを配列にする」ということのみです。

それ以外は通常の使い方と変わらないため、それほど苦労することなく使って頂けるかと思います。

では早速、実際のコードを見ながらその挙動を確認していきましょう。

実装コード

<div id="app1">
  <div v-for="language in languages">
    <input type="checkbox" v-model="selectedLanguages" :value="language.name" :id="language.id">
    <label :for="language.id">{{ language.name }}</label>
  </div>
  
  <p v-show="selectedLanguages.length">現在選択されているのは{{ selectedLanguages.join(", ") }}です。</p>
</div>

<script>
let app1 =  new Vue ({
  el: "#app1",
  data: {
    input1: ""
  }
})
</script>

動作確認用


  
    
    {{ language.name }}
  
  現在選択されているのは{{ selectedLanguages.join(", ") }}です。

上記のようにして、値を格納したいdataプロパティ（ここではselectedLanguages）の初期値を配列にしておくことで、その値をv-modelディレクティブに設定するだけで、チェックボックスの選択値を管理することができます。

この点のみ注意しておけば、通常のv-modelディレクティブと同じ感覚で使用することができますので、とても便利であることがお分かりいただけたかと思います。

最後に

さて、ここまでチェックボックスでv-modelディレクティブを使用する方法についてご紹介してきましたがいかがでしたか？

「格納先のdataプロパティを配列にしておく」という点だけ注意しておけば通常の使い方と変わりはありません。

このv-modelディレクティブは、Vue.jsでWebアプリを作成する際に避けて通れない道と言っても過言ではないため、ぜひこの機会にマスターしておいてくださいね。

このブログを通じて少しでも「傍（はた）を楽（らく）にする」ことができていれば嬉しく思います。

最後まで読んで頂きありがとうございました。

【Vue.js】v-modelでチェックボックスを管理してみましょう

v-modelディレクティブとは？

【Vue.js】チェックボックスでv-modelを使用する方法

最後に

【Vue.js】v-modelで双方向バインディングを実装してみましょう

【Vue.js】v-modelでselectタグを管理してみましょう