Vue.js: how to relate values in an array of strings?

Question

I have the following problem, I have an array of strings that assembles a list:

ex:

op: ['100', '101', '102', '103', '104', '200', '201', '202', '300', '301', '303', '500']

From that list, I create through the v-for various "toggles" that can be enabled/disabled, when it is enabled, I pass to another array, the active strings:

ex:

opSelecionado: ['100', '101', '102', '200']

The difficulty is to relate the numbers with end "00" with the others, for example, when I disable '100', the values '101' and '102' should be removed from this new array or when enable '101' the '100' should be enabled.

This is possible with these string arrays?

Here is an example from codepen

Answer 1

You can add a @click in its input where it calls a method to check its rules and update the array of options selected with the function filter in accordance with those rules.

Follow codepen link with this working example: https://codepen.io/anon/pen/WWpXqB

Answer 2

You can capture the click in the checkboxes and check if the "group" should be disabled, according to the element clicked. Here is a codepen.