Vue JS re-create the root component

Question

I need to destroy and re-create the root application component. This is my template:

<div id="app">
  {{ num }}
</div>

And this is my code:

 if (app) {
      app.$destroy();
    } else {
      app = new Vue(Object.assign({
        el: '#app',
      }, { data: { num: Math.random() } }))
    }

This code runs on button click, but it doesn't clean the template and refresh the new data I'm passing. Any idea why?

If app is set then app.$destroy() will be called, but app = new Vue not because it is in the else block, so it won't be recreated (app.$destroy would not magically empty the variable app). But way do you want to to it this way, instead of updating the data? — t.niese
– t.niese, Commented Aug 26, 2018 at 13:13
Why do you need this functionality? Please specify, if you don't all we can do is guess — Patrick Hollweck
– Patrick Hollweck, Commented Aug 26, 2018 at 13:26

t.niese · Accepted Answer · 2018-08-26 13:40:30Z

2

I'm pretty sure that your attempt so solve a problem in a way that it should not be solve, or that you use vue in the wrong way.

But to you problem, when you execute this code:

if (app) {
  app.$destroy();
}

Then the documentation state:

Completely destroy a vm. Clean up its connections with other existing vms, unbind all its directives, turn off all event listeners.

So they don't say that the element to wich the vue app is attached to has to or will change. If you want to clean up the DOM then you need to delete the content manually.

After app.$destroy() the app variable will still hold the destroyed vue instance (app wont be magically unset). So another execution of the code will not trigger the else block. You also have to set app to something that evaluates to falsy.

if (app) {
  app.$destroy();
  app = undefined;
}

Now app is undefined so at the next time the if statment is evaluated, the else block would be evaluated and a new instance is created.

edited Aug 26, 2018 at 13:40

answered Aug 26, 2018 at 13:33

t.niese

41k9 gold badges78 silver badges111 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

undefined Over a year ago

Can you create a plunker, please? Its still doesn't work. The view doesn't change.

t.niese Over a year ago

@undefined you most cerently didn't restore the content of app to contain the tempalte markup again. Because this fiddle works fine. But still, this is mostlikely the wrong way to solve the problem, not matter what you want to achive.

t.niese Over a year ago

@undefined that's what you have written in your code. Move the new Vue out of the else block and you won't need to clicks. You're not very informative about what exactly you want to do and why.

Patrick Hollweck · Accepted Answer · 2018-08-26 13:25:37Z

0

Your specific use case is not specified in the question, but I assume you want to update something that is not being updated automatically.

To update your component you can use

this.$forceUpdate()

to force a reload of the component.

answered Aug 26, 2018 at 13:25

Patrick Hollweck

6,8552 gold badges21 silver badges35 bronze badges

1 Comment

undefined Over a year ago

I need to re-create the app because I am allowing to pass more than data, you can also pass your methods, computed, etc.

Collectives™ on Stack Overflow

Vue JS re-create the root component

2 Answers 2

3 Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Related