Как организовать логику фильтра из списка чекбоксов на vue.js?

Question

[Алекс Фил]

У меня есть список чекбоксов, один из которых all, список должен соответствовать следующим условиям:
1) Изначально выводится все, если выбираем хоть один чекбокс из листинга, то checked снимается с all.
2) Чекбоксы можно выбирать до тех пор пока, не выберем все, и тогда со всех checked снимается и ставится в all.
3) Пока мы не проставили все чекбоксы в листинге, можно в любой момент поставить в all и все возвращается в первоначальное состояние.

Криво смог реализовать пару условий, но что-то мне подсказывает, что сам подход не верен, и возможно вообще стоит разделить all и остальной список чекбоксов?

Вот мой fiddle.

Comments

[Алекс Фил]

Немного допилил логику и вот финальный fiddle

Answer 1

[Evgeny Kulakov]

https://jsfiddle.net/kulakoff/ns267kbc/

Comments

[Алекс Фил]

Спасибо за ваше решение, оно крайне лаконично, правда логика не до конца верна)

[Evgeny Kulakov]

Алекс Фил, точно) https://jsfiddle.net/kulakoff/7n1njcxn/

Answer 2

[0xD34F]

Так?

что-то мне подсказывает, что сам подход не верен

Ну в общем да, проблемка есть - унеся всю логику в computed (чего вообще делать не надо, т.к. computed для подобного не предназначены), затруднительно определить, какой из чекбоксов изменил последним своё состояние. Если выбран один чекбокс "секция №" и "все", что надо делать - снять первый или второй? Непонятно.

возможно вообще стоит разделить all и остальной список чекбоксов?

Да, так тоже можно.

Comments

[Алекс Фил]

Да! Все верно) Спасибо за подробное разъяснение и два варианта решения!)))