Vueで単体/複数のチェックボックスを使い分ける

Vueでカスタムチェックボックスを作る際に「単体と複数をどう判定すればいいのか」を悩んだので、Vueの公式ドキュメントを改めて確認した。

公式ドキュメント

公式ドキュメントを参考（ほとんど同じ）にサンプルを作成した。
作成したサンプル

単体と複数のチェックボックスを使い分けるという点に注目して、説明する。

結論だけ見たい人はこちら。

単体のチェックボックス

単体のチェックボックスを作成する場合、v-modelに指定する値の初期値をbooleanにする。
チェックが入れば、「v-modelに設定したプロパティ」に「true」が代入される。
チェックが外れれば、「v-modelに設定したプロパティ」に「false」が代入される。

<template>
  <div>
    <h2>単体のチェックボックス</h2>

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

<script>
export default {
  data() {
    return {
      checked: false
    };
  }
};
</script>

複数のチェックボックス

複数のチェックボックスを作成する場合、v-modelに指定する値の初期値をArray(配列)にして、value属性を指定する。

チェックが入れば、「v-modelに設定したプロパティ」へ「valueに設定した値」が追加される。
チェックが外れれば、「v-modelに設定したプロパティ」から「valueに設定した値」が除去される。

「value」を設定していない場合、「value」は「true」として扱われた。この挙動について、公式ドキュメントに記載は見当たらなかった。もしかしたらあるかもしれない。

<template>
  <div>
    <h2>複数のチェックボックス</h2>

    <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
    <label for="jack">Jack</label>
    <input type="checkbox" id="john" value="John" v-model="checkedNames">
    <label for="john">John</label>
    <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
    <label for="mike">Mike</label>
    <br>
    <span>Checked names: {{ checkedNames }}</span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      checkedNames: []
    };
  }
};
</script>

単体と複数の違い

単体と複数では以下の違いがあることが分かった。

	初期値	value属性
単体	true / false	なし
複数	Array(配列)	あり

この違いを踏まえた上でカスタムチェックボックスを作ると簡単にできる。