1

我正在尝试向组件添加多个过滤器。例如，用户可以选择一个类别，结果将被过滤。此外，由于我有一个搜索过滤器实现，我如何将其他过滤器与连接过滤器结合起来？例如，如果我输入“冬季”，并选择一个不包含冬季的类别（假期过滤器），则不会显示任何结果。

我试过在谷歌上查找这个，但我一次只能实现一个过滤器。

更新 我将计算的属性更改为一般的过滤项数组。现在，我可以设置过滤器，但是，当第一次加载页面时，在我选择过滤器之前什么都不会出现。关于如何解决这个问题的任何想法？

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

如您所见，我有一个过滤假日过滤器，当单击按钮时，它会过滤掉所有非假日结果并仅显示假日。

这是按钮组件，单击时应过滤我的第一个组件中的数据

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

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

1 回答 1

2

无需为每个过滤器列出多个计算属性，而是创建一个名为 filtersItems 的通用计算属性并在模板中循环遍历该属性。 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
        })
    }
  }
于 2020-08-06T20:50:01.567 回答