Как сформировать такой массив данных из выбранных чекбоксов?

Question

[nastya_zholudeva]

пример тут

"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
            }
]

Пользователь выбирает несколько таких чекбоксов и нажимает кнопку "Выбрать". Как сформировать такой массив данных?

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

filters приходит через props из vuex

Answer 1

[0xD34F]

Пользователь выбирает несколько таких чекбоксов и нажимает кнопку "Выбрать".

А зачем кнопка? Можно же сделать computed свойство, выбранные элементы будут доступны в любой момент (конечно, если вы не забыли связать данные с чекбоксами через v-model), как-то так:

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

Comments

[nastya_zholudeva]

0xD34F, Я правильно поняла, что каждый чекбокс из v-for будет выглядеть так?

<input type="checkbox" :value="item.value" v-model="filters">

UPD: кнопка нужна, так как чекбоксов таких много и каждый раз делать запрос это слишком

[0xD34F]

nastya_zholudeva, без понятия. Если что не так - выкладывайте код в песочницу, будем разбираться.

[nastya_zholudeva]

0xD34F, https://jsfiddle.net/Jussia/v19c8pt5/2/

[0xD34F]

nastya_zholudeva, ну типа вот.

[nastya_zholudeva]

0xD34F, а как сделать, если этот filters приходит через props из vuex?

[0xD34F]

nastya_zholudeva, а сразу было сказать никак? Что за тупёжка-то такая, а? За почти год так и не научились вопросы нормально задавать, просто фантастика.

[nastya_zholudeva]

0xD34F, ну да, тупежка) Не думала, что это понадобится

[0xD34F]

nastya_zholudeva, если состояние чекбоксов должно быть доступно в хранилище - делайте соответствующую мутацию, тут думаю, всё понятно.

Если же нет - можно всё сделать внутри компонента, куда приходят filters. Добавляете объект, который будет использоваться как хранилище состояний чекбоксов, ключи будут собираться из filterId и key. Ну а когда надо собрать массив - Object.entries, filter, reduce, все дела. Например.