VueJS and $forceUpdate()

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.$forceUpdate();

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

← Previous article Next article →

← back to main Blog page

Written by Matt Clark

Meshtastic Pet Tracker

Dokku and MySQL Root Control

Questioning the Ubiquity of Text Files