title: How to add multiple filters on a Vue component's data?
body: <p>I am trying to add multiple filters to a component. For example, a user can select a category and the results will be filtered. Additionally, since I have a search filter implement, how can I combine other filters with the join filter? For example, If I type 'Winter', and select a category that does not contain winter (a holidays filters), no results would show.</p>
  <p>I've tried looking this up on Google, but I am only able to implement one filter at a time.</p>
  <p><strong>UPDATE</strong>
  I changed my computed properites to be a general filteredItems array. Now, I am able to set filters, however, when first load the page, nothing appears until I select a filter. Any ideas on how this can be fixed?</p>
  <pre><code>&lt;template&gt;
    &lt;div class=&quot;cards&quot;&gt;
      &lt;CountdownCard
        v-for=&quot;(event, index) in filteredItems&quot;
        :key=&quot;index&quot;
        :event=&quot;event&quot;
      /&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  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 =&gt; {
        this.updateSearch = search
      })
    },
    computed: {
      filteredItems: function() {
        return this.events
          .filter(event =&gt; {
            return event.title
              .toLowerCase()
              .includes(this.updateSearch.toLowerCase())
          })
          .filter(event =&gt; {
            return event.type == this.filter
          })
      }
    }
  }
  &lt;/script&gt;
  </code></pre>
  <p>As you can see, I have a filteredHolidays filter that, when a button is clicked, would filter out any non-holiday results and display only holidays.</p>
  <p>Here is the button component, that when clicked, should filter the data in my first component</p>
  <pre><code>&lt;template&gt;
    &lt;button&gt;{{ filter.name }}&lt;/button&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    props: {
      filter: {
        type: Object,
        required: true
      }
    }
  }
  &lt;/script&gt;
  </code></pre>