首页 > 解决方案 > 链接过滤器 Vue.js

问题描述

基本上我想链接过滤器。

搜索过滤
器 具有预定义值的复选框样式的价格过滤器,例如 < 10$ ,$20 -$50, $50+
用于选择“主题”的复选框样式的过滤器
选择样式的排序过滤器“升序、降序、最高和最低价格”

我制作了一个有效的搜索过滤器,但我无法让所有过滤器一起工作。

我将感激我得到的任何帮助。:)

提前致谢。

JS

    filteredSearch() {
      return this.products.filter(p => p.topic.toLowerCase().match(this.search.toLowerCase()));

    }

HTML

<div class="block" v-for="product in filteredSearch">

标签: htmlvue.js

解决方案


根据我们在评论中关于链接过滤器调用的讨论,这里是您如何做到这一点的一个示例。

    filterSearch() {
       return this.products
                  .filter(product => product.topic.toLowerCase().match(this.search.toLowerCase()))
                  .filter(product => product.price < checkbox.Value)
    } 

推荐阅读