基于Vue的数组过滤

Question

我已经创建了一个演示网站来向客户销售产品。该网站使用过滤器/搜索/排序等来简化浏览不同产品的过程。我遇到的问题与过滤和搜索有关。我想对过滤器进行处理，使其对搜索结果有效。我已经尝试使用复选框和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>

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
                    },
                    {
                        name: "soda",
                        location: "London",
                        price: 90
                    },
                    {
                        name: "tea",
                        location: "Oslo",
                        price: 120
                    },
                    {
                        name: "bakedbeans",
                        location: "Oslo",
                        price: 140
                    }
                ],


  },
methods: {
   toggleFilter (newFilter) {
      this.filters = !this.filters.includes(newFilter) 
        ? [...this.filters, newFilter] 
        : this.filters.filter(f => f !== newFilter)
    } 
    },
  computed: {
    possibleFilters() {
        return [...new Set(this.filteredSearch.map(x => x.location))]
      },

      filteredSearch() {
        return this.products.filter(p => { 
          var searchProduct = p.name.toLowerCase().includes(this.search.toLowerCase()); 
          var filterProduct = this.filters.length == 0 || this.filters.includes(p.location); 

          return searchProduct && filterProduct
        })



        }



  },
})

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

即，如果我搜索“ l”，则返回牛奶和苹果，过滤器显示伦敦和爱丁堡，我只能选择伦敦或爱丁堡，但不能同时选择两者。如果我选择伦敦，则只应向我显示“牛奶”，同时仍向我显示“爱丁堡”选项，当我同时选择两者时，应同时向我显示“牛奶”和“苹果”

显示问题的小提琴：https://jsfiddle.net/Calv7/L1vnqh63/9/

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

Answer 1

这能解决您的问题吗？

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