Hey there fellow developers, I'm currently in the process of developing an app and have reached the stage where I am filtering elements using dropdowns. I am querying a JSON object and comparing it with the selected element in the dropdown at that moment. However, whenever I select an element, no result is shown.
{
"user":null,
"products":[
{
"product_name":"Chain Saw",
"product_category":[
{
"categories_of_product":"Good"
},
{
"categories_of_product":"Danger"
},
{
"categories_of_product":"Homer"
}
]
},
...
]
}
In my methods, I have defined a function that targets a v-modeled global variable which corresponds to a tag in my HTML imported from one of the app components (this part works perfectly). Let's say:
SCRIPT
data(){
return{
CategoriesDropDown: "",
}
},
methods:{
filterSearch(selectedCategory) {
this.CategoriesDropDown = selectedCategory;
},
}
Then, when attempting to filter all my elements based on this.CategoriesDropDown, it doesn't work as expected. Selecting any category from the dropdown causes all products to disappear. Below is the function where I try to access the JSON object and filter based on the selected option in the dropdown:
COMPUTED
callProducts() {
if (this.CategoriesDropDown) {
return this.getAllProducts.products.forEach(categories => {
return categories.product_category.filter(string => {
return string.categories_of_product.toUpperCase() === this.CategoriesDropDown.toUpperCase()
;
});
});
} else {
return this.getAllProducts.products;
}
}
When nothing is selected: https://i.sstatic.net/Rw7vi.png
When any item is selected: https://i.sstatic.net/2tDeG.png
Any advice on how I can improve this last function to correctly filter my products would be greatly appreciated. Thank you in advance!