Currently, my search filter allows users to search for a wine by name and producer location. I would like to enhance this feature to also include searching within a list of objects in an array (grapes). Is this feasible and how can it be implemented? Please see the code snippet below for reference.
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 Code:
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
},
})