Vue Update

Posted on  by admin
Most of the time when a value in the data object of a Vue Class instance changes, the view will render again automatically, but in some cases it will not.

For this reason or any other extending circumstance I might want to force Vue to render the vue again. This is where the force update method will come into play as a way to do just that. If I do find myself using it though I cant help but think that I should not be using it, most of the time the reason why a vue is not updating is because an object added to the vue is not reactive, so maybe a better solution would be to make it reactive in that case.

So the force update method should not be a replacement for the Vue.Observable and Vue.set methods.

Simply put there is making sure that all nested objects in the data object that should be reactive are in fact reactive first and foremost.
Still there might be some situations now and then where I will just have to use the force update method.

So lets look at some examples that make use of the force update method, and some others that do the same thing without the use of the method. One situation in which I have found that I need to use the vue force update method is when I have an array of objects that I am not directly rendering in the template, but is used to update a data object value that is used in the template in an updated hook.

In such a situation a change or addition to the array will not cause the vue to render again, unless I call force update.

Now maybe I should completely change the whole way that I am going about doing this.

yarn global add @vue/[email protected]

For one thing maybe I should update the total value in the tick method rather than in the updated hook.

npm i -g @vue/[email protected]

However this is a post on the force update method so I do have to just come up with a weird situation in which it might need to be used.

vue upgrade

Still yes using the force update method is often an indication that there is something that I am doing that can and maybe should be done differently.

Browse other questions tagged javascriptvue.js or ask your own question.

So lets look at some additional examples of this sort of thing that might help avoid using the force update method.

Not the answer you're looking for? Browse other questions tagged javascriptvue.js or ask your own question.