Issue when using Vuejs with computed filter

Question

I am writing a filter application by using Vuejs with checkboxes. It works well when I use single checkbox. However, it removes the results when I check more than than 2 che

Answer 1

Your filterProjects method should look something like this.

filteredProjects: function(){
  let filterProjects = this.projects;

  if (this.checkedHealths.length > 0){
    filterProjects = filterProjects.filter(project => {
      return this.checkedHealths.includes(project.Health);
    })
  }

  if (this.checkedStatuses.length > 0){
    filterProjects = filterProjects.filter(project => {
      return this.checkedStatuses.includes(project.Status)
    })
  }

  return filterProjects;
}

Updated fiddle.

Essentially, your old filter code was checking each filter individually, where you needed to handle them all at once. The above code loops through the projects and checks if the project's value is in the selected filter values.

You're also using a lot of jQuery where you could just be using native methods and Vue.