is there a way I can programmatically update the data object / property in vue.js? For example, when my component loads, my data object is:. And after an event is triggered, I want the data object to look like:. But this gives me the error this.set is not a function. Can someone help? Thanks in advance! 3838 gold badges105105 silver badges185185 bronze badges. 185185 bronze badges. Vue does not allow dynamically adding new root-level reactive properties to an already created instance.
However, it’s possible to add reactive properties to a nested object, So you may create an object and add a new property like that:.
and add the property with the set method:. for vue 1.x use Vue.set(this.someObject, 'planes', true).
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.