Html 链接过滤器Vue.js

基本上我想要链式过滤器

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

我已经做了一个搜索过滤器，但我不能让我的头周围使所有的过滤器一起工作

我将对得到的任何帮助表示感谢。：）

提前谢谢

JS

HTML

---

根据我们在有关链接筛选器调用的评论中的讨论，这里是一个示例，说明了如何进行链接

filterSearch（）{
退回此产品
.filter（product=>product.topic.toLowerCase（）.match（this.search.toLowerCase（）））
.filter（product=>product.price

根据我们在有关链接筛选器调用的评论中的讨论，这里是一个示例，说明了如何进行链接

filterSearch（）{
退回此产品
.filter（product=>product.topic.toLowerCase（）.match（this.search.toLowerCase（）））
.filter（product=>product.price

正如评论所说，多个链式过滤器可以工作。由于您允许用户根据复选框进行动态筛选，因此您可以执行以下操作：

computed: {
  filteredSearch() {
      return this.products.filter((p) => {
        if (this.ltTenFilterApplied) {
          return p.value < 10;
        } else {
          return true;
        }
      })
      .filter(// filter based on btwnTwentyAndFiftyFilterApplied the same way )
      .fitler((filteredP) => {
        if (this.tagsToFilterBy && this.tagsToFilterBy.length > 0) {
          return this.tagsToFilterBy.includes(filteredP.categoryTagName);
        } esle {
          return true;
        }
      });
    }
},
data() {
  return {
    ltTenFilterApplied: false,
    btwnTwentyAndFiftyFilterApplied: false,
    topicsToFilterBy: [],
    products: [// things here],
  };
},
methods: {
  addTopicsFilter(aFilterFromClickEvent) {
    this.topicsToFilterBy.push(aFilterFromClickEvent);
  },
  removeTopicFilter(bFilterFromClickEvent) {
    this.topicsToFilterBy = this.topicsToFilterBy.filter(bFilterFroMClickEvent);
  }
}

计算：{
filteredSearch（）{
返回此.products.filter（（p）=>{
如果（已应用此.lttenfilter）{
返回p.value<10；
}否则{
返回true；
}
})
.filter（//基于BTWntwenty和FiftyFilter的筛选器以相同的方式应用）
.fitler（（filteredP）=>{
if（this.tagsToFilterBy&&this.tagsToFilterBy.length>0）{
返回此.tagsToFilterBy.includes（filteredP.categoryTagName）；
}埃斯勒{
返回true；
}
});
}
},
数据（）{
返回{
ltTenFilterApplied:false，
BTWntwenty和fiftyFilterApplied:false，
topicsToFilterBy:[]，
产品：[//这里的东西]，
};
},
方法：{
addTopicsFilter（aFilterFromClickEvent）{
this.topicsToFilterBy.push（来自ClickEvent的过滤器）；
},
移除过滤器（bFilterFromClickEvent）{
this.topicsToFilterBy=this.topicsToFilterBy.filter（bFilterFroMClickEvent）；
}
}

正如评论所说，多个链式过滤器可以工作。由于您允许用户根据复选框进行动态筛选，因此您可以执行以下操作：

computed: {
  filteredSearch() {
      return this.products.filter((p) => {
        if (this.ltTenFilterApplied) {
          return p.value < 10;
        } else {
          return true;
        }
      })
      .filter(// filter based on btwnTwentyAndFiftyFilterApplied the same way )
      .fitler((filteredP) => {
        if (this.tagsToFilterBy && this.tagsToFilterBy.length > 0) {
          return this.tagsToFilterBy.includes(filteredP.categoryTagName);
        } esle {
          return true;
        }
      });
    }
},
data() {
  return {
    ltTenFilterApplied: false,
    btwnTwentyAndFiftyFilterApplied: false,
    topicsToFilterBy: [],
    products: [// things here],
  };
},
methods: {
  addTopicsFilter(aFilterFromClickEvent) {
    this.topicsToFilterBy.push(aFilterFromClickEvent);
  },
  removeTopicFilter(bFilterFromClickEvent) {
    this.topicsToFilterBy = this.topicsToFilterBy.filter(bFilterFroMClickEvent);
  }
}

计算：{
filteredSearch（）{
返回此.products.filter（（p）=>{
如果（已应用此.lttenfilter）{
返回p.value<10；
}否则{
返回true；
}
})
.filter（//基于BTWntwenty和FiftyFilter的筛选器以相同的方式应用）
.fitler（（filteredP）=>{
if（this.tagsToFilterBy&&this.tagsToFilterBy.length>0）{
返回此.tagsToFilterBy.includes（filteredP.categoryTagName）；
}埃斯勒{
返回true；
}
});
}
},
数据（）{
返回{
ltTenFilterApplied:false，
BTWntwenty和fiftyFilterApplied:false，
topicsToFilterBy:[]，
产品：[//这里的东西]，
};
},
方法：{
addTopicsFilter（aFilterFromClickEvent）{
this.topicsToFilterBy.push（来自ClickEvent的过滤器）；
},
移除过滤器（bFilterFromClickEvent）{
this.topicsToFilterBy=this.topicsToFilterBy.filter（bFilterFroMClickEvent）；
}
}

只需保持链接

过滤器

方法即可

this.products.filter（[search filter]）.filter（[checkbox filter]）…

然后实现一个将排序筛选器考虑在内的自定义排序方法。您可以使用计算属性链接吗？还是仅方法？Yuppers，计算属性只是函数的一个奇特术语。您可以在该函数中执行任何操作，只需返回值即可。好的，可能不是任何东西，承诺或异步中的任何东西都会破坏它，但在承诺或异步之外的任何东西都会破坏它。

filteredSearch:function（）{return this.products.filter（function（product）{return product.toLowerCase（）.match（this.search.toLowerCase（））}

我尝试了这个，但它完全停止了工作。我做错了什么？在如何做这件事上有一些混乱，因此我将提供一个快速示例作为答案，以便发布代码片段。只需继续链接

筛选器

方法。

this.products.filter（[search filter]）.filter（[checkbox filter]）…

然后实现一个将排序过滤器考虑在内的自定义排序方法。您可以使用计算属性链接吗？还是仅使用方法？Yuppers，计算属性只是函数的一个奇特术语。您可以在该函数中执行任何您想做的操作，只返回值。好的，可能没有任何内容，承诺或异步中的任何内容都可以你可以随意破解它。

filteredSearch:function（）{return this.products.filter（function（product）{return product.topic.toLowerCase（）.match（this.search.toLowerCase（））}）

我尝试了这个，但它完全停止了工作。我做错了什么？在如何做这件事上有一些困惑，所以我将抛出一个简单的例子作为答案，这样我就可以发布一个代码片段。感谢Adam，这很有效。我猜

复选框。值
是通过使用v-model绑定的？嗯
复选框。值
只是一个占位符表示您需要在那里获取该复选框的值。感谢Adam，这很有效。我猜是
复选框。值
是通过使用v-model绑定的？嗯
复选框。值
只是一个占位符，表示您需要在那里获取该复选框的值。
computed: {
  filteredSearch() {
      return this.products.filter((p) => {
        if (this.ltTenFilterApplied) {
          return p.value < 10;
        } else {
          return true;
        }
      })
      .filter(// filter based on btwnTwentyAndFiftyFilterApplied the same way )
      .fitler((filteredP) => {
        if (this.tagsToFilterBy && this.tagsToFilterBy.length > 0) {
          return this.tagsToFilterBy.includes(filteredP.categoryTagName);
        } esle {
          return true;
        }
      });
    }
},
data() {
  return {
    ltTenFilterApplied: false,
    btwnTwentyAndFiftyFilterApplied: false,
    topicsToFilterBy: [],
    products: [// things here],
  };
},
methods: {
  addTopicsFilter(aFilterFromClickEvent) {
    this.topicsToFilterBy.push(aFilterFromClickEvent);
  },
  removeTopicFilter(bFilterFromClickEvent) {
    this.topicsToFilterBy = this.topicsToFilterBy.filter(bFilterFroMClickEvent);
  }
}