I am facing a challenge in implementing multiple filters in a component. For instance, users should be able to choose a category and have the results filtered accordingly. Moreover, with a search filter already in place, I am looking for a way to combine it with other filters like the holiday filter. Specifically, if a user enters 'Winter' in the search field and selects a category that does not include winter (such as holidays), no results should be displayed.
Despite searching on Google, I have only been successful in implementing one filter at a time.
UPDATE I updated my computed properties to utilize a general filteredItems array. Although I am now able to set filters, the issue arises when initially loading the page - nothing appears until a filter is selected. Any suggestions on how to rectify this?
<template>
<div class="cards">
<CountdownCard
v-for="(event, index) in filteredItems"
:key="index"
:event="event"
/>
</div>
</template>
<script>
import CountdownCard from '@/components/CountdownCard'
import EventBus from '@/components/EventBus'
export default {
components: {
CountdownCard
},
data() {
return {
events: [
{
title: 'Autum',
date: 'September 22, 2020',
emoji: '🍂',
type: 'holiday',
year: 2020,
month: 8,
day: 22,
hour: 0,
minute: 0
},
{
title: 'Winter',
date: 'December 21, 2020',
emoji: '⛄️',
type: 'holiday',
year: 2020,
month: 11,
day: 21,
hour: 0,
minute: 0
}
updateSearch: ''
}
},
mounted() {
EventBus.$on('search-countdowns', search => {
this.updateSearch = search
})
},
computed: {
filteredItems: function() {
return this.events
.filter(event => {
return event.title
.toLowerCase()
.includes(this.updateSearch.toLowerCase())
})
.filter(event => {
return event.type == this.filter
})
}
}
}
</script>
There is also a filteredHolidays filter included, which triggers upon clicking a button to display only holiday-related results.
Below is the button component that, when clicked, is supposed to apply the filter in the first component:
<template>
<button>{{ filter.name }}</button>
</template>
<script>
export default {
props: {
filter: {
type: Object,
required: true
}
}
}
</script>