checkboxを並べて、それが3つほどで収まっている場合は、それだけでもいいでしょう。
しかし、ユーザーが自身で追加した項目など、何個出力されるか分からない場合があります。
ここではそんな時にあると便利な「すべて選択」を実装してみます。
実装デモ
See the Pen Select All Checkbox by Vue.js - flow4 by Shoko Oyamada (@chcltn) on CodePen.
「すべて選択」の実装の流れ
1.dataとv-forでリストを用意
dataにて、猫の名前を配列catsに入れておきます。
それを利用し、v-forでリストを作成します。
See the Pen Select All Checkbox by Vue.js - flow1 by Shoko Oyamada (@chcltn) on CodePen.
2.すべて選択が押されたかのフラグを用意
次に、すべて選択が押されたかのフラグとなる変数を作成します。
dataの中で
isAllSelectedという変数を作成し、falseに設定しておきます。
method内で selectAllCats という関数を作成します。
この関数では、上記のフラグが切り替わるようにしておきます。
関数が出来たら、HTML側で、すべて選択のチェックボックスに@clickでくっつけておきます。
See the Pen Select All Checkbox by Vue.js - flow2 by Shoko Oyamada (@chcltn) on CodePen.
3.すべて選択が押された時の動きを作成
実際のアプリケーション開発の現場では、catsのようなデータはidを割り振られ管理されていることでしょう。なので以降はdata内のcatsにもidを割り振っておきましょう。名前はnameに入れておくことにします。
HTML側の出力も{{cat.name}}のようにしておきましょう。
また、実際の現場では、既に何かしらが選ばれていることが多いので、
selectedCatIdsにも値を入れてみましょう。（これは入れなくても大丈夫です）
See the Pen Select All Checkbox by Vue.js - flow3 by Shoko Oyamada (@chcltn) on CodePen.
これで、すべて選択が動くようになりました。
4.個々のcheckboxをクリックした時の動きを作成
このすべて選択のチェックボックスは
個々のチェックボックスの選択状態と連動して動いて欲しいと思います。
- 個々のチェックボックスどれか1つでも外れている時には、
すべて選択もチェックが外れる - 個々のチェックボックスすべてがチェックされた時には、
すべて選択もチェックされる
という動きにしてみましょう。
selectという関数を定義し、
selectedCatIdsのlengthとcatsのlengthを突き合わせ、判定します。
lengthが一致しなかった時は、isAllSelectedをfalseにし、すべて選択のチェックを外します。
See the Pen Select All Checkbox by Vue.js - flow4 by Shoko Oyamada (@chcltn) on CodePen.
これで完成です。おつかれさまでした。