Check all object keys are empty

I have a Vue component that I'm using to set filters on my webpage for the tables, and I want to check if it has any data set to display a badge or something for the user to know there are filters being used.

This is the object I'm trying to check

{ "date_range": { "start": null, "end": null }, "user_roles": [ "4" ] }

This is the complete filters prop, even though there are a lot here in the object above they aren't always present.

filters: {
            type: Object,
            default: () => ({
                channels: null,
                chains: null,
                formats: null,
                supervisors: null,
                products: null,
                sale_points: null,
                trash: null,
                date_range: {
                    start: null,
                    end: null
                },
                soft_delete: 'active'
            })
        },

I'm trying to make a computed property that will check the contents of this.filters and see if all those are their default values (null or 'active'). I'm not sure what is best considering date_range is also an object.

How can I do this?

Ben Taylor

3 years ago

Level 35

What if you had an active_filters data property that starts as an empty object? If a filter is selected, add it to the object. Remove it from the object if it's deselected. Then your computed property could check if the object is empty or not. Maybe something like

return Object.keys(this.active_filters).length

Please or to participate in this conversation.