How to form such an array of data from the selected checkboxes?

Question

JavaScript

example here

"filters": [
            {
                "type": "checkbox",
                "title": "Пол",
                "filterData": {
                    "variants": [
                        {
                            "key": 14,
                            "value": "Мужской"
                        },
                        {
                            "key": 15,
                            "value": "Женский"
                        }
                    ]
                },
                "filterId": 1
            },
{
                "type": "checkbox",
                "title": "num",
                "filterData": {
                    "variants": [
                        {
                            "key": 2,
                            "value": "345"
                        },
                        {
                            "key": 1,
                            "value": "123"
                        }
                    ]
                },
                "filterId": 2
            }
]

The user selects several of these checkboxes and presses the "Select" button. How to form such an array of data?

[
{ "filterId": 1, values: [14,15]},
{ "filterId": 2, values: [1]},
]

PS filters comes via props from vuex

Answer 1

The user selects several of these checkboxes and presses the "Select" button.

Why a button? You can also make a computed property, the selected elements will be available at any time (of course, if you do not forget to bind the data to the checkboxes via v-model), something like this:

selected() {
  return this.filters.map(n => ({
    filterId: n.filterId,
    values: n.filterData.variants.filter(m => m.checked).map(m => m.key)
  }));
}