I have successfully retrieved data from the database.
The structure of the data is as follows:
serie
--- title (string)
--- category (array)
To filter the data, I have implemented a search filter using a computed property. This is how it looks:
filteredSeries () {
return this.series.filter(serie => {
return serie.title.toLowerCase().match(this.search.toLowerCase())
})
}
Looping through the series is done in the following manner:
<v-flex xs12 sm4 md3 lg2 v-for="serie in filteredSeries" :key="serie.title" pa-3>
.....
</v-flex>
The search term is obtained from here:
<v-text-field label="Search" height="35" v-model="search" prepend-inner-icon="search"></v-text-field>
Everything is working smoothly so far, but now I'm facing a challenge. I want to filter the series not only by the title but also by category.
All categories are obtained from the data method and stored in an array like this:
data () {
return {
series: [],
search: '',
categories: [
'Crime', 'Drama', 'Mistery', 'Comedy', 'Horror', 'Sci-Fi'
],
filterCategory: []
}
},
The filter select dropdown is populated 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 dropdown returns a filterCategory array. My goal is to fetch series based on specific categories selected in filterCategory. I am unsure of how to achieve this. Ideally, filtering by category should be incorporated into the computed property where search filtering is currently being performed.
If anyone has any suggestions or solutions on how to accomplish this, I would greatly appreciate it.