Добавление оператора 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
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
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(' '))));

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