如何在 Vue 组件的数据上添加多个过滤器？

Posted 2023-02-23

【中文标题】如何在 Vue 组件的数据上添加多个过滤器？

【英文标题】：How to add multiple filters on a Vue component's data?

【发布时间】：2020-11-27 01:42:43

【问题描述】：

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

我尝试在 Google 上查找此内容，但我一次只能实现一个过滤器。

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

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

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

这里是按钮组件，当点击它时，应该过滤我的第一个组件中的数据

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

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

</script>

【问题讨论】：

你能提供一个在线工作的例子吗？我想我知道该怎么做才能实现您想要的东西，但是在真实示例中进行处理会很好。

@Pipetus，当然，看看我的 github 仓库！ github.com/tyler-morales/countdown。谢谢！

我的意思是JSFiddle :)

@Pipetus 我不认为我能够创建它，我有太多相互关联的组件，有些东西会损坏。但是，我刚刚更新了上面的代码。您如何看待filteredItems 计算属性？而且，您对在页面首次加载时显示所有项目有什么建议吗？

好吧，反正我正要发一些和你现在的答案类似的东西。

【参考方案1】：

不要为每个过滤器列出多个计算属性，而是创建一个名为 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
        )