VueJS and $forceUpdate()

Vuejs logo
Recently I was assisting a Gorges developer with a challenging bug in a VueJS application where some of the state value changes were not being recognized, so a related part of the web page was not rendering correctly. We found several calls to this method in the code:
This was an immediate red flag! Whenever I see a forced refresh, it tells me that the reactivity mechanism that automatically is triggered by content changes is not working.
Further investigation revealed the problem and there was an associative array field that had an element assignment that was being done with an equals sign using a format list like this:
myObject.prop = 'value';
The solution was to switch to an explicit Vue.set() function like this that explicitly triggers the reactivity:
Vue.set(myObject, 'prop', 'value');
There are better blog articles that explain why statements like this are not reactive, but the takeaway for me was that using this.$forceUpdate() is indicative of code smell, and if it is found in code then it may be a hack for a deeper problem.

Need experienced VueJS developers for your project?
Read more about our Web Development services

Written by Matt Clark


GORGES Web Development The owner of this website has made a commitment to accessibility and inclusion, please report any problems that you encounter using the contact form on this website. This site uses the WP ADA Compliance Check plugin to enhance accessibility.