vue js- multi select : Select All / deselect All

Question

I need to have select all and deselect all functionality in vue multiselect https://vue-multiselect.js.org/

Here is the problem statement/requirement:

MainArray=[1112,1113,1115,6667,6668,6669,1199,1144]

when I type 111 then vue multi select will display only:

1112,1113,1115

Now I need an option to select all these three items with one click and need to add these items to

selectedArray=[1112,1113,1115]

When I again type 66 vue multi select will display

6667,6668 and 6669

Now I need to select all these three items, thus making

selectedArray =[1112,1113,1115,6667,6668,6669]

Now I search 111 again multiselect vue will display 1112,1113,1115. Now I need to deselect all thus making

selectedArray=[6667,6668,6669]

Again when I search 11, I vue multiselect will display

1112,1113,1115,1199,1144.

Here 1112,1113,1115 are in selected state and 1199,1144 are in deselect state. Now when I click on select All[May be a check box or a clickable text] I need to select the remaining deselected items. Thus making

selectedArray=[1112,1113,1115,6667,6668,6669,1199,1144].

Queries:

1. What is the best control I can choose for this Select All / Deselect All? Check box/ clickable text?

2. Best possible solution to implement this functionality?

Answer 1

Now it’s very hacky, but you could make use of vue-multiselect‘s option groups: optionGroups

So something like:

1. Listen on @input and set filter and set group- properties
2. use computed property filteredArray instead of MainArray, where you construct a list of a group, with the values which match the filter criteria, if there is no filter set, return the original array
3. Click on said filter group to select/deselect all children