在Vue JS中使用搜索过滤器时，有没有一种方法可以搜索数组中的对象？

Question

我有一个非常基本的搜索过滤器，该过滤器允许用户使用葡萄酒名称和生产者的位置来搜索葡萄酒。

但是，我也希望搜索可以处理数组中的对象列表（葡萄）。这可能吗，怎么办？我当前的代码如下。

HTML：

  <input type="text" v-model="search" placeholder="Search products">
  <ul>
      <li v-for="product in filteredProducts">
         <h2>{{product.name}}</h2>
        <span>{{product.location}}</span>
      </li>
  </ul>

然后我的Vue代码是：

new Vue({
  el: '#app',
    data() {
        return {
            search:'',
            products: [
              { 
                name: 'The Black Sock',
                location: 'Australia',
                grapes: ['shiraz']
              },
              { 
                name: 'Goat Roti',
                location: 'France',
                grapes: ['Shiraz' , 'Mourvedre']
              },
              { 
                name: 'Amon Ra',
                location: 'New Zealand',
                grapes: ['Chardonnay', 'Riesling']
              }
            ]
        }
    },
    computed: {
        filteredProducts:function(){
            return this.products.filter((product) => {
              return product.name.toLowerCase().match(this.search.toLowerCase()) ||  product.location.toLowerCase().match(this.search.toLowerCase());
            });
        }

        filteredSearch.sort((a, b) => {
              if (a.name< b.name)
                  return -1;
              if (a.name> b.name)
                  return 1;
              return 0;
        });
        return filteredSearch
    },
})

Answer 1

无论输入名称，位置还是葡萄，都输入要搜索的内容，例如，如果输入shiraz，它将在name，location或grapes中显示所有包含设拉子的元素

let vue = new Vue({
  el: '#app',
    data() {
        return {
            search:'',
            products: [
              { 
                name: 'The Black Sock',
                location: 'Australia',
                grapes: ['shiraz']
              },
              { 
                name: 'Goat Roti',
                location: 'France',
                grapes: ['Shiraz' , 'Mourvedre']
              },
              { 
                name: 'Amon Ra',
                location: 'New Zealand',
                grapes: ['Chardonnay', 'Riesling']
              }
            ]
        }
    },
    methods: {
       sortByName(a,b){
          return a.name.toLowerCase().localeCompare(b.name.toLowerCase());
       }
    },
    computed: {
        filteredProducts:function(){
           let comperator = this.sortByName;
           if(this.search == "") return this.products.sort(comperator);
           let search = this.search.toLowerCase();
           return this.products.filter(({name, location, grapes}) => name.toLowerCase().includes(search) || location.toLowerCase().includes(search) || grapes.find(el => el.toLowerCase().includes(search))).sort(comperator);
        }
    }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <input type="text" v-model="search" placeholder="Search products">
  <ul>
      <li v-for="product in filteredProducts">
         <h2>{{product.name}}</h2>
        <p>{{product.location}}</p>
        <p>{{product.grapes}}</p>
      </li>
  </ul>
</div>

Answer 2

您可以使用includes检查数组中是否存在某些东西。

您可以将filter与includes一起使用。

const products = [
              { 
                name: 'The Black Sock',
                location: 'Australia',
                grapes: ['shiraz']
              },
              { 
                name: 'Goat Roti',
                location: 'France',
                grapes: ['Shiraz' , 'Mourvedre']
              },
              { 
                name: 'Amon Ra',
                location: 'New Zealand',
                grapes: ['Chardonnay', 'Riesling']
              }
            ]
            
const selectedGrapes =  'Shiraz'  

const filteredProducts = products.filter(product => product.grapes.includes(selectedGrapes))

console.log(filteredProducts)