基于Vue的数组过滤

Question

我创建了一个演示网站来向客户销售产品。该网站使用过滤器/搜索/排序等来轻松浏览不同的产品。我遇到的问题与过滤和搜索有关。我想让我的过滤器能够处理搜索结果。我尝试使用 Vue 中的复选框和计算属性来实现此目的。超文本标记语言<div id="app">            <h5>Search</h5>            <input type="text" v-model="search" placeholder="Search title.."/><br><br>            <h5>Filter</h5>            <li v-for="filter in possibleFilters" :key="filter">                <label>                    <input type="checkbox" @change="toggleFilter(filter)" :checked="filters.includes(filter)">                <span >{{filter}}</span>                </label>            </li>                      <div class="block" v-for="(product, index) in filteredSearch">                        <hr>                        <h3>{{product.name}}</h3>                        <p>Price: £{{product.price}}</p>                        <p>Location: {{product.location}}</p>                        <hr></div></div>JavaScriptnew Vue({   el: "#app",   data: {      filters: [],      search: "",      products: [{            name: "milk",            location: "London",            price: 100         },         {            name: "oranges",            location: "Birmingham",            price: 80         },         {            name: "apples",            location: "Edinburgh",            price: 90         },         {            name: "bananas",            location: "Paris",            price: 120         },         {            name: "bread",            location: "Paris",            price: 110         },         {            name: "water",            location: "Oslo",            price: 90         },问题是我无法多次选择过滤器。过滤器基于位置，我的目标是能够多次应用过滤器。目前我一次只能选择一个过滤器。即，如果我搜索“l”，它会返回牛奶和苹果，过滤器显示伦敦和爱丁堡，我只能选择伦敦或爱丁堡，但不能同时选择两者。如果我选择伦敦，它应该只显示“牛奶”，同时仍然显示“爱丁堡”选项，当我选择两者时，它应该显示“牛奶”和“苹果”显示问题的小提琴： https ://jsfiddle.net/Calv7/L1vnqh63/9/任何帮助将不胜感激。谢谢。

Answer 1

这能解决您的问题吗？

possibleFilters() {
    return [...new Set(this.products.map(x => x.location))]
},

Answer 2

这是一个基于您的小提琴的快速而肮脏的解决方案。只是为了让您了解如何分离两个过滤器。尝试这里的解决方案https://jsfiddle.net/4839spkx/

 possibleFilters() {

    // we have some input, so show all location filters available in the filtered by input products

    if (this.search) {

        const filteredByInput = this.products.filter(p => p.name.includes(this.search.toLowerCase()))

        return [...new Set(filteredByInput.map(p => p.location))]

    }

    return [...new Set(this.filteredSearch.map(x => x.location))]

 },

Answer 3

由于您使用计算属性从过滤的产品位置动态生成可能的过滤器，因此每次更新过滤的产品时都会更新。我建议您创建一个新数组并用您的数据填充该数组。

HTML：

...

<li v-for="filter in possibleFiltersArr" :key="filter">

    <label>

      <input type="checkbox" @change="toggleFilter(filter)" :checked="filters.includes(filter)">

      <span>{{filter}}</span>

    </label>

  </li>

...

JS

...

 data: {

  posibleFiltersArr:[],

...

created(){

        this.possibleFiltersArr=[...new Set(this.filteredSearch.map(x => x.location))]

    },

...

您可以在方法中设置此数组created()，并且可以在搜索框中输入一些文本后更新此数组。