Vue.jsで「すべて選択」を実装する

checkboxを並べて、それが3つほどで収まっている場合は、それだけでもいいでしょう。
しかし、ユーザーが自身で追加した項目など、何個出力されるか分からない場合があります。
ここではそんな時にあると便利な「すべて選択」を実装してみます。

# 実装デモ

<p data-height="265" data-theme-id="0" data-slug-hash="GYgEyX" data-default-tab="js,result" data-user="chcltn" data-pen-title="Select All Checkbox by Vue.js - flow4" class="codepen">See the Pen <a href="https://codepen.io/chcltn/pen/GYgEyX/">Select All Checkbox by Vue.js - flow4</a> by Shoko Oyamada (<a href="https://codepen.io/chcltn">@chcltn</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

# 「すべて選択」の実装の流れ

1. [dataとv-forでリストを用意](#1dataとv-forでリストを用意)
2. [```すべて選択```が押されたかのフラグを用意](#2すべて選択が押されたかのフラグを用意)
3. [```すべて選択```が押された時の動きを作成](#3すべて選択が押された時の動きを作成)
4. [個々のcheckboxをクリックした時の動きを作成](#4個々のcheckboxをクリックした時の動きを作成)

## 1.dataとv-forでリストを用意

dataにて、猫の名前を配列```cats```に入れておきます。
それを利用し、v-forでリストを作成します。

<p data-height="265" data-theme-id="0" data-slug-hash="qJEmpd" data-default-tab="html,result" data-user="chcltn" data-pen-title="Select All Checkbox by Vue.js - flow1" class="codepen">See the Pen <a href="https://codepen.io/chcltn/pen/qJEmpd/">Select All Checkbox by Vue.js - flow1</a> by Shoko Oyamada (<a href="https://codepen.io/chcltn">@chcltn</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

## 2.```すべて選択```が押されたかのフラグを用意

次に、```すべて選択```が押されたかのフラグとなる変数を作成します。
```data```の中で
```isAllSelected```という変数を作成し、```false```に設定しておきます。

method内で ```selectAllCats``` という関数を作成します。
この関数では、上記のフラグが切り替わるようにしておきます。

関数が出来たら、HTML側で、```すべて選択```のチェックボックスに```@click```でくっつけておきます。


<p data-height="265" data-theme-id="0" data-slug-hash="dgPNGR" data-default-tab="js,result" data-user="chcltn" data-pen-title="Select All Checkbox by Vue.js - flow2" class="codepen">See the Pen <a href="https://codepen.io/chcltn/pen/dgPNGR/">Select All Checkbox by Vue.js - flow2</a> by Shoko Oyamada (<a href="https://codepen.io/chcltn">@chcltn</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

## 3.```すべて選択```が押された時の動きを作成

実際のアプリケーション開発の現場では、```cats```のようなデータはidを割り振られ管理されていることでしょう。なので以降は```data```内の```cats```にもidを割り振っておきましょう。名前は```name```に入れておくことにします。

HTML側の出力も```{{cat.name}}```のようにしておきましょう。

また、実際の現場では、既に何かしらが選ばれていることが多いので、
```selectedCatIds```にも値を入れてみましょう。（これは入れなくても大丈夫です）


<p data-height="265" data-theme-id="0" data-slug-hash="rqamZE" data-default-tab="js,result" data-user="chcltn" data-pen-title="Select All Checkbox by Vue.js - flow3" class="codepen">See the Pen <a href="https://codepen.io/chcltn/pen/rqamZE/">Select All Checkbox by Vue.js - flow3</a> by Shoko Oyamada (<a href="https://codepen.io/chcltn">@chcltn</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

これで、```すべて選択```が動くようになりました。

## 4.個々のcheckboxをクリックした時の動きを作成

この```すべて選択```のチェックボックスは
個々のチェックボックスの選択状態と連動して動いて欲しいと思います。

- 個々のチェックボックスどれか1つでも外れている時には、```すべて選択```もチェックが外れる
- 個々のチェックボックスすべてがチェックされた時には、```すべて選択```もチェックされる

という動きにしてみましょう。

selectという関数を定義し、
```selectedCatIds```の```length```と```cats```の```length```を突き合わせ、判定します。
lengthが一致しなかった時は、```isAllSelected```をfalseにし、```すべて選択```のチェックを外します。

<p data-height="265" data-theme-id="0" data-slug-hash="GYgEyX" data-default-tab="js,result" data-user="chcltn" data-pen-title="Select All Checkbox by Vue.js - flow4" class="codepen">See the Pen <a href="https://codepen.io/chcltn/pen/GYgEyX/">Select All Checkbox by Vue.js - flow4</a> by Shoko Oyamada (<a href="https://codepen.io/chcltn">@chcltn</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

これで完成です。おつかれさまでした。