Menu
Just a quick question.
Can you force Vue.js to reload/recalculate everything? If so, how?
826
Unfortunately, there are no simple ways to force-reload components properly in Vue.
The best way to force Vue to re-render a component is to set a :key on the component. When you need the component to be re-rendered, you just change the value of the key and Vue will re-render the component.
To remount a component in Vue. js, we should change the key prop of the component. to set the key prop of my-component to componentKey . And then we add a button to toggle the componentKey between true and false .
Using the key changing technique If the key stays the same, it won't change the component, but if the key changes, Vue knows that it should get rid of the old component and re-create a new one. Every time that forceRerender is called, our prop componentKey will change.
Try this magic spell:
vm.$forceUpdate(); //or in file components this.$forceUpdate(); 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: https://vuejs.org/v2/guide/computed.html
192
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.
43
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
