I have a vue.js app where I use the componenttag with :is="currentView" approach for changing the active view. I have a "state machine" that keeps track of valid transitions from a component to another component depending on some business logic. Sometimes this will tell the vue instance that the new value of currentViewis the same as the old one. If this happens, the component will not be reloaded. Is there any way I can force the component to reload even if the view is the same? That is I want the data to be reloaded, and the lifecycle hooks being executed.
Add a comment
|
2 Answers
You can add a unique key attribute to your component definition so that it correctly triggers all the component lifecycle methods.
Your component definition should look something like this:
<component :is="view" :key="unique_key"></component>
Helpful links:
1 Comment
Alex Napitupulu
Please accept this answer. This is the correct way of doing it.
This seems to do the trick, hower it causes the view to flash, is there a way I can avoid this?
const oldView = this.currentView
this.currentView = engine.advance()
if(this.currentView == oldView) {
//force reload!
this.currentView = ''
this.$nextTick(function () {
this.currentView = oldView
})
}