对数据库中的数据放置多个过滤器

Question

I am fetching data from database.

Data is structured like this:

serie
   --- title (string)
   --- category (array)

I made search filter with computed property. It looks like this:

filteredSeries () {
  return this.series.filter(serie => {
    return serie.title.toLowerCase().match(this.search.toLowerCase())
  })
}

I am looping through series like this:

<v-flex xs12 sm4 md3 lg2 v-for="serie in filteredSeries" :key="serie.title" pa-3>

.....

</v-flex>

Search word is got from here:

<v-text-field label="Search" height="35" v-model="search" prepend-inner-icon="search"></v-text-field>

It all works just fine, but now we are getting to my problem. I want to filter series not just by title, but by category too.

I get all categories from data method in array like this:

data () {
  return {
    series: [],
    search: '',
    categories: [
      'Crime', 'Drama', 'Mistery', 'Comedy', 'Horror', 'Sci-Fi'
    ],
    filterCategory: []
  }
},

Filter select is filled with data like this:

<v-select  prepend-inner-icon="category" height="35" v-model="filterCategory" :items="categories" chips label="Category" multiple></v-select>

This select is returning filterCategory array. Now what I want is that I get series with specific categories selected in filterCategory. I don't know how to do that. I think that it would be perfect if filtering by category could be included in computed property where is filtering by search word done.

Any help how that could be done is welcome.

Answer 1

Your filter method can be modified to also filter by filteredCategories .

We can use JavaScript's Array.every() and Array.includes() method to do that.

Also, I would use String.includes() instead of String.match() , as match() is mostly used when searching against a regular expression.

filteredSeries () {

  // Filtering by selected categories.
  const filteredSeries = this.series.filter(serie => {
    return this.filteredCategories.every(category => {
      return serie.categories.includes(category);
    });
  });

  // Further filtering by search word.
  return filteredSeries.filter(serie => {
      return serie.title.toLowerCase().includes(this.search.toLowerCase()));
  });
}