I have a bunch of class binding statements:
:class="{active: isActive('status', status.id)}"
Here's the method referred to above:
isActive: function (param, value) {
if (!this.activeFilters.hasOwnProperty(param) && value === 'all' && param !== 'type') {
return true;
}
...etc
}
...and the computed property the method is looking at:
activeFilters() {
return this.$store.state.activeFilters;
},
Which is in the Vuex state.
The problem is, these properties aren't updating when one of the dropdowns with the above class binding is clicked on. If I navigate to another route and then back, the active class has been applied just fine. Can I force the computed property to recompute so the class is applied immediately?
I understand that adding properties won't trigger reactivity, but according to this, if I replace the object with a fresh one, reactivity should be maintained. Well here's what I'm doing:
state.activeFilters = query;
...replacing the object. I am stumped.
Figured it out. After my function I need this to force the component to re-render: