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

JavaScript

new 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()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;[...new&nbsp;Set(this.products.map(x&nbsp;=>&nbsp;x.location))] },

Answer 2

这是一个基于您的小提琴的快速而肮脏的解决方案。只是为了让您了解如何分离两个过滤器。尝试这里的解决方案https://jsfiddle.net/4839spkx/&nbsp;possibleFilters() {&nbsp; &nbsp; // we have some input, so show all location filters available in the filtered by input products&nbsp; &nbsp; if (this.search) {&nbsp; &nbsp; &nbsp; &nbsp; const filteredByInput = this.products.filter(p => p.name.includes(this.search.toLowerCase()))&nbsp; &nbsp; &nbsp; &nbsp; return [...new Set(filteredByInput.map(p => p.location))]&nbsp; &nbsp; }&nbsp; &nbsp; return [...new Set(this.filteredSearch.map(x => x.location))]&nbsp;},

Answer 3

由于您使用计算属性从过滤的产品位置动态生成可能的过滤器，因此每次更新过滤的产品时都会更新。我建议您创建一个新数组并用您的数据填充该数组。HTML：...<li v-for="filter in possibleFiltersArr" :key="filter">&nbsp; &nbsp; <label>&nbsp; &nbsp; &nbsp; <input type="checkbox" @change="toggleFilter(filter)" :checked="filters.includes(filter)">&nbsp; &nbsp; &nbsp; <span>{{filter}}</span>&nbsp; &nbsp; </label>&nbsp; </li>...JS...&nbsp;data: {&nbsp; posibleFiltersArr:[],...created(){&nbsp; &nbsp; &nbsp; &nbsp; this.possibleFiltersArr=[...new Set(this.filteredSearch.map(x => x.location))]&nbsp; &nbsp; },...您可以在方法中设置此数组created()，并且可以在搜索框中输入一些文本后更新此数组。