Как добавить несколько фильтров к данным компонента Vue? - PullRequest
Новая
       32

Как добавить несколько фильтров к данным компонента Vue?

1 голос
/ 06 августа 2020

Я пытаюсь добавить к компоненту несколько фильтров. Например, пользователь может выбрать категорию, и результаты будут отфильтрованы. Кроме того, поскольку у меня есть фильтр поиска, как я могу комбинировать другие фильтры с фильтром объединения? Например, если я наберу «Зима» и выберу категорию, не содержащую зиму (фильтры праздников), результаты не будут отображаться.

Я пытался найти это в Google, но только возможность реализовать по одному фильтру за раз.

ОБНОВЛЕНИЕ Я изменил свои вычисленные свойства на общий массив filterItems. Теперь я могу устанавливать фильтры, однако при первой загрузке страницы ничего не появляется, пока я не выберу фильтр. Есть идеи, как это исправить? 

<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>

Как видите, у меня есть фильтр filterHolidays, который при нажатии кнопки отфильтровывает любые результаты, не относящиеся к праздникам, и отображает только праздники.

Вот компонент кнопки, который при нажатии должен фильтровать данные в моем первом компоненте 

<template>
  <button>{{ filter.name }}</button>
</template>

<script>
export default {
  props: {
    filter: {
      type: Object,
      required: true
    }
  }
}
</script>

1 Ответ

1 голос
/ 06 августа 2020

Вместо перечисления нескольких вычисляемых свойств для каждого фильтра сделайте общее вычисляемое свойство с именем filterItems и l oop через это в шаблоне. v-for="(event, index) in filteredItems"

computed: {
    filteredItems: function() {
      return this.events
        .filter(event => {
          return event.title
            .toLowerCase()
            .includes(this.updateSearch.toLowerCase())
        })
        .filter(event => {
          return event.type == this.filter
        })
    }
  }
...