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

Question

[danilr]

Помогите написать фильтр, который работает так - есть массив с фильтрами, которым должны соответствовать отобранные объекты. activeFilter = ['display', 'water', 'gps']
Массив состоит из объектов, в котором есть флаги по которым нужно фильтровать:

{
 disColor : true,
  water : false,
 gps : true
}

Фильтр должен быть независимым, то есть если хоть один из флагов true, то включать его в результат.
Помогите написать такой алгоритм

Answer 1

[0xD34F]

Добавим в компонент описание фильтров. Это будет массив объектов, содержащих два свойства: имя (совпадает с именем свойства в элементах фильтруемого массива) и активность (указывает, надо ли применять это фильтр):

data: () => ({
  filters: [
    { name: 'disColor', active: true },
    { name:    'water', active: true },
    { name:      'gps', active: true },
  ],
  ...

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

<label v-for="f in filters">
  <input type="checkbox" v-model="f.active">
  {{ f.name }}
</label>

Наконец, применим фильтры - сделаем вычисляемое свойство, которое будет представлять отфильтрованные данные:

computed: {
  filteredItems() {
    const filters = this.filters.filter(n => n.active);
    return this.items.filter(n => filters.some(f => n[f.name]));
  },
  ...

https://jsfiddle.net/276xgmho/

Comments

[danilr]

Сложно для понимания, можете рассказать поэтапно как работает ваш скрипт?

[0xD34F]

danilr, там всего две строчки, что может быть непонятно? Первая - отбираем активные фильтры. Вторая - собственно фильтрация данных, отбираем элементы, у которых хотя бы одно свойство, из соответствующих активным фильтрам, не false (может, вам метод some незнаком?).