При использовании фильтров поиска в Vue JS есть ли способ поиска по объектам в массиве?

Question

У меня очень простой фильтр поиска c, который позволяет пользователю выполнять поиск вина, используя имя вина и местонахождение производителя.

Однако я бы также хотел, чтобы поиск работал со списком объектов в массиве (виноград). Возможно ли это и как это сделать? Мой текущий код следующий:

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)