Javascript 基于Vue的阵列滤波

我创建了一个演示网站，向客户销售产品。本网站使用过滤器/搜索/排序等，以方便浏览不同的产品。我遇到的问题与过滤和搜索有关。我想使我的过滤器，使他们对搜索结果的工作。我尝试使用Vue中的复选框和计算属性来实现这一点

HTML

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

问题是我不能多次选择过滤器。过滤器基于位置，我的目标是能够多次应用过滤器。目前，我一次只能选择一个过滤器

i、 如果我搜索“l”，它返回牛奶和苹果，过滤器显示伦敦和爱丁堡，我只能选择伦敦或爱丁堡，但不能同时选择两者。如果我选择伦敦，它应该只显示“Milk”，同时还显示“Edinburgh”选项，当我同时选择这两个选项时，它应该同时显示“Milk”和“Apple”

显示问题的小提琴：

---

任何帮助都将不胜感激。谢谢。

这能解决你的问题吗

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

---

这能解决你的问题吗

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

---

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

HTML:

---

您可以在

created（）

方法中设置此数组，并在搜索框上输入一些文本后更新此数组。

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

HTML:

---

您可以在

created（）

方法中设置此数组，并在搜索框中输入一些文本后更新此数组。

这里是一个基于您的小提琴的快速而肮脏的解决方案。只是想让你知道如何分离这两个过滤器。 在这里尝试解决方案

---

这里有一个基于您的小提琴的快速而肮脏的解决方案。只是想让你知道如何分离这两个过滤器。 在这里尝试解决方案

---

您是否尝试过修改

可能的过滤器

功能？据我所见，新过滤器就是从那里来的。我如何修改？我仍在学习Vue。您是否尝试过修改

可能的过滤器

功能？据我所见，新过滤器就是从那里来的。我如何修改？我仍在学习Vue。很好的答案：DIt不会，因为我希望过滤器能够处理搜索结果。这个例子可能会混淆我为什么需要它，但实际上我计划在一个大型仓库中使用它作为库存管理，那里的位置可能是一些乱七八糟的a1-b3-9a等，有数千种产品。@Calv，在这种情况下，你可以做一个重置按钮，当点击时重置过滤器。很好的回答：DIt不会，因为我希望过滤器在搜索结果上工作。这个例子可能会混淆我为什么需要它，但实际上，我计划在一个大型仓库中使用它作为库存管理，那里的位置可能是一些乱七八糟的a1-b3-9a等，有数千种产品。@Calv，在这种情况下，你可以制作一个重置按钮，在单击时重置过滤器。

...
<li v-for="filter in possibleFiltersArr" :key="filter">
    <label>
      <input type="checkbox" @change="toggleFilter(filter)" :checked="filters.includes(filter)">

      <span>{{filter}}</span>
    </label>
  </li>
...

...
 data: {
  posibleFiltersArr:[],
...
created(){
        this.possibleFiltersArr=[...new Set(this.filteredSearch.map(x => x.location))]
    },
...

 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))]
 },