CODEWITHSUNDEEP
vue.js
Runar Halse
Runar Halse

Reputation: 3558

Vue.js dynamic component reload

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.

Upvotes: 3

Views: 5041

Answers (2)

grane2212
grane2212

Reputation: 774

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:

Reloading a dynamic component

Vue 'key' api reference

Upvotes: 3

Runar Halse
Runar Halse

Reputation: 3558

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
    })
  }

Upvotes: 0

Related Questions