Vue Js Force Component Update

Posted on  by admin

Modified3 days ago. Just a quick question. Can you force Vue.js to reload/recalculate everything? 4949 bronze badges. 11.3k99 gold badges4242 silver badges5252 bronze badges. 4242 silver badges5252 bronze badges. Try this magic spell:. No need to create any hanging vars :).

Update: I found this solution when I only started working with VueJS. However further exploration proved this approach as a crutch. As far as I recall, in a while I got rid of it simply putting all the properties that failed to refresh automatically (mostly nested ones) into computed properties. More info here: 102102 bronze badges. 3,61422 gold badges1313 silver badges1111 bronze badges.

1313 silver badges1111 bronze badges. Please read this The horrible way: reloading the entire page The terrible way:using the v-if hack The better way: using Vue’s built-inforceUpdate method The best way: key-changing on yourcomponent.

Not the answer you're looking for? Browse other questions tagged javascriptnode.jsvue.jsreloadrerender or ask your own question.

I also use watch: in some situations. 8080 bronze badges. 5,77422 gold badges3434 silver badges2525 bronze badges. 3434 silver badges2525 bronze badges. This seems like a pretty clean solution from matthiasg on this issue:. you can also use :key="someVariableUnderYourControl" and change the key when you want to component to be completely rebuilt.

For my use case, I was feeding a Vuex getter into a component as a prop. Somehow Vuex would fetch the data but the reactivity wouldn't reliably kick in to rerender the component. In my case, setting the component key to some attribute on the prop guaranteed a refresh when the getters (and the attribute) finally resolved. 44 gold badges1919 silver badges2828 bronze badges. 2828 bronze badges. Try to use this.$router.go(0); to manually reload the current page. 11 gold badge1010 silver badges1313 bronze badges.

The best way: key-changing

1313 bronze badges. you need to force an update? Perhaps you are not exploring Vue at its best:. To have Vue automatically react to value changes, the objects must be initially declared in data. Or, if not, they must be added using Vue.set(). See comments in the demo below. Or open the same demo in a JSFiddle here. To master this part of Vue, check the Official Docs on Reactivity - Change Detection Caveats.

It is a must read! 3535 gold badges313313 silver badges290290 bronze badges. 290290 bronze badges. You can force-reload components by adding :key="$route.fullPath". For Child Component:. For router-view tag:. However, :key="$route.fullPath" only can force-reload the components of the different route but not the components of the same route.

Here is the best way to do this

To be able to force-reload the components of the same route as well, we need to add "value" with an array to :key="$route.fullPath" and change "value". So it becomes :key="[$route.fullPath, value]" and we need to change "value". *We can assign Array to :key=. However, to keep using both "$route.fullPath" and "value" causes some error sometimes so only when some event like Click happens, we use both "$route.fullPath" and "value".

Except when some event like Click happens, we always need to use only "$route.fullPath". Unfortunately, there are no simple ways to force-reload components properly in Vue. That's the problem of Vue for now. 55 gold badges4141 silver badges4949 bronze badges.

4949 bronze badges. In order to reload/re-render/refresh component, stop the long codings. There is a Vue.JS way of doing that. Just use :key attribute. I am using that one in BS Vue Table Slot. Telling that I will do something for this component so make it unique.

5555 bronze badges. So there's two way you can do this,. You can use $forceUpdate() inside your method handler i.e. You can give a :key attribute to your component and increment when want to rerender. 14231423 bronze badges. 2,30811 gold badge2121 silver badges2222 bronze badges. 2121 silver badges2222 bronze badges.

Terrible way: the v-if hack

The approach of adding :key to the vue-router lib's router-view component cause's fickers for me, so I went vue-router's 'in-component guard' to intercept updates and refresh the entire page accordingly when there's an update of the path on the same route (as $router.go, $router.push, $router.replace weren't any help). The only caveat with this is that we're for a second breaking the singe-page app behavior, by refreshing the page.