Добавление оператора if в метод фильтрации во vue

Я создаю приложение во Vue, которое будет фильтровать элементы в объекте JSON. У меня возникают проблемы с добавлением фильтра типа флажка в это приложение, потому что я хочу, чтобы фильтр флажка запускался, только если установлен хотя бы один флажок, а не запускался, если ни один из них не отмечен. Итак, в настоящее время у меня есть:

  computed: {
   filteredJobs: function(){
      var filteredList = this.jobs.filter(el=> {
        return el.title.toUpperCase().match(this.search.toUpperCase())
        && el.employmentType.toUpperCase().match(this.selectedJobType.toUpperCase())
        && el.customText12.toUpperCase().match(this.selectedLocation.toUpperCase())
        && el.dateAdded >= this.checkedDate
      });


      if (!this.checkedServiceAreas.length) {
        return filteredList;
      }else{
        return filteredList.filter(job => this.checkedServiceAreas.includes(job.categories.data.map(({name}) => name).join(' ')));
      }

    }

  }

Поэтому я выполняю большую часть своей фильтрации с помощью раскрывающихся списков выбора, что упрощает использование метода сопоставления для фильтрации объекта JSON, но для флажков это немного сложнее, потому что их можно проверять несколько раз. Как я сейчас это настроил, это оператор IF, чтобы фильтровать только checkedServiceAreas, если установлен хотя бы один флажок. Если нет, просто запустите мой обычный отфильтрованный метод.

Что я пытаюсь сделать, так это найти способ включить мой оператор IF в мой метод фильтрации без необходимости делать это в два этапа, как я сделал выше.

Вы знаете о селекторе запросов CSS :checked? Вы можете сделать document.querySelectorAll(".myInput:checked") и использовать его, чтобы составить список всех отмеченных флажков.

TheCrzyMan 31.10.2018 13:41
0
1
70
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий
  return el.title.toUpperCase().match(this.search.toUpperCase())
    && el.employmentType.toUpperCase().match(this.selectedJobType.toUpperCase())
    && el.customText12.toUpperCase().match(this.selectedLocation.toUpperCase())
    && el.dateAdded >= this.checkedDate
    && (this.checkedServiceAreas.length === 0 ||
        this.checkedServiceAreas.includes(el.categories.data.map(({name}) => name).join(' '))));

Другие вопросы по теме