@Ooos
Front-End

Как отфильтровать список по нескольким параметрам?

Нужно отфильтровать список по двум параметрам, с одним проблем нет.
В данном случае отфильтрует по itemData, а как сделать, чтобы и по monthData смог отфильтровать?
filteredItems() {
        return this.response.filter(item => {
          var itemData = item.location_name.indexOf(this.active_location) > -1
          var monthData = item.month.indexOf(this.active_date) > -1
          return itemData
        })
      }

Ссылка на фильтрацию с один параметром:
Пример
  • Вопрос задан
  • 1000 просмотров
Решения вопроса 1
0xD34F
@0xD34F Куратор тега Vue.js
Если совпадения должны быть по обоим: return itemData && monthData.
Если достаточно одного: return itemData || monthData.

UPD. А вообще, давайте попробуем реализовать более общее решение, с произвольным количеством фильтров.

Добавим описания фильтров. Пусть это будет объект, имена свойств которого совпадают со свойствами, по которым выполняется фильтрация, а значения - объекты, содержащие текущее значение фильтра и функцию сравнения:

data: {
  filters: {
    'какое-то свойство': {
      value: какое-то дефолтное значение,
      compare: (itemValue, filterValue) =>
        сравнение значений фильтра и элемента фильтруемого массива
    },
    ...
  },
  ...

Создадим элементы управления, чтобы пользователь мог редактировать значения фильтров, например:

<input v-model="filters.xxx.value">

или

<select v-model="filters.yyy.value">

Сделаем вычисляемое свойство, представляющее отфильтрованные данные. Перебираем фильтры, на каждой итерации отбрасываем те элементы, которые не проходят текущий фильтр:

computed: {
  filteredItems() {
    return Object.entries(this.filters).reduce((items, [ key, filter ]) => {
      return items.filter(item => filter.compare(item[key], filter.value));
    }, this.items);
  },
  ...

https://jsfiddle.net/89sLpwar/
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы