0

Имеется фильтр компонент,в нем кнопки с чекбоском. При нажатии на кнопку, апи даёт 20 товаров этой категории. И выводятся на странице. Компонент

this.$store.commit(
 'showFilteredList',
  response.data.items
);

filter.js

state: {
 filteredBrands: []
},

mutations: {
  showFilteredList(state, payload) {
   if(payload.length < 1) {
     console.log('clear');
   } else {
     state.filteredBrands = payload;
   }
  }
}

Проблема в том, что если я выбираю еще 1 чекбокс - то прилетают другие товары из категории, прошлые перезатираются state.filteredBrands = payload;, связано с этой строкой. Но пушить не выходит. В целом, хотелось бы, чтобы при выборе двух и более чекбоксов товары выводили на странице, если чекбокс снят у какого либо - товары убирались.

Что нужно изменить или добавить?

1 ответ 1

1

предположим что в данных которые приходят с бека есть ключ category, это позволит привязывать значения чекбокса к этому ключу и уже исходя из этого можно реализовать нужную логику. При получении данных я бы использовал spread оператор, который позволит добавлять значения в уже имеющийся массив

showFilteredList(state, payload) {
   if(payload.length < 1) {
     return
   } 

  state.filteredBrands = [...state.filteredBrands, payload];
  }

потом при снятии галочки с выбранного чекбокса я бы вызывал мутацию, которая бы фильтровала массив с переданным значением чекбокса

deleteCheckboxItems(state, checkBoxValue) {
state.filteredBrands = state.filteredBrands.filter((item) => item.category !== checkBoxValue)
  }
1
  • Я немного изменил, то, что вы предложили. Теперь товары появляются и убираются со страницы. Но Только для первого массива, то есть, если выбрать два checkbox, то первый будет убираться, а второй нет, с ошибкой Duplicate keys
    – Alex
    Commented 13 дек. 2021 в 13:15

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.