DEV Community 👩‍💻👨‍💻

Discussion on: Multi Filter Column in Vuetify Data Table

Collapse
chlo_boucher_2670d05d9ed profile image
Chloé Boucher

I'm a beginner and I was wondering, In the "filterDessertName" function, where does the parameter "item" comes from ? I have that a lot in my javascript code but I never understood where it came from and also, how to add other parameters to these kind of functions without skipping the first invisible one when we call it ? Can someone help ?

Collapse
brunopanassi profile image
Bruno Panassi Author

Hi Chloé, maybe i can help you.

The parameter "item" will be used in the line 142 , on the command "return condition(dessert)", in this case "dessert" is the item, because "conditions" its an array of boolean functions, and will return "true" or "false" to the "conditions.every" on line 141.

So will not be an invisible parameter, because in the "return condition(dessert)", "condition" can be one of the filter methods, like "filterCalories" and "dessert" its the "item". You can add a second parameter on the method like "index" if you pass a value inside the "conditions.every", for example:

return this.desserts.filter((dessert) => {
    return conditions.every((condition, index) => {
        return condition(dessert, index);
        })
    })

filterCalories(item, index) {
    return item.calories.toString().includes(this.calories) && item.indexOf(index)
 }
Enter fullscreen mode Exit fullscreen mode
Collapse
chlo_boucher_2670d05d9ed profile image
Chloé Boucher

Thank you very much! And thank you for your code btw! Is there a way to avoid repetitions if we want to add a filter to 6 columns for example ? I mean having only one filter method and also only one template in the html instead of 6 ?

Thread Thread
brunopanassi profile image
Bruno Panassi Author

This was exactly what i thought when i make this code, but i did not have time to think in a solution for this, but im almost sure that there is a solution for this, unfortunately by now i dont have a solution :(

Thread Thread
chlo_boucher_2670d05d9ed profile image
Chloé Boucher

Hey thanks anyway! I just worked on it and found a solution for the methods :) Probably not the best but it's working and it's shorter! How can I share it here in the comments like you did ? I'm new to this website

Thread Thread
brunopanassi profile image
Bruno Panassi Author

If you want to share only the part of JS, you can type here in comments, otherwise if you want to show the full project you can upload it on the CodePen and share the link here :)