How to organize filter logic from a list of checkboxes in vue.js?

Question

JavaScript

I have a list of checkboxes, one of which is all, the list must meet the following conditions:
1) Initially, everything is displayed, if we select at least one checkbox from the listing, then checked is removed from all.
2) Checkboxes can be selected until we select all, and then checked is removed from all and set to all.
3) While we have not put down all the checkboxes in the listing, you can set it to all at any time and everything returns to its original state.

Krivo was able to implement a couple of conditions, but something tells me that the approach itself is not correct, and maybe it’s worth separating all and the rest of the list of checkboxes?

Here is my fiddle .

Answer 1

So ?

something tells me that the approach itself is not correct

Well, in general, yes, there is a problem - taking all the logic into computed (which you don’t need to do at all, because computed is not intended for this), it is difficult to determine which of the checkboxes changed its state last. If one checkbox "section number" and "all" is selected, what should be done - deselect the first one or the second one? Unclear.

perhaps it is generally worth separating all and the rest of the list of checkboxes?

Yes, that's also possible .

Answer 2

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