Build a brand new root component in Vue JS

Question

Build a brand new root component in Vue JS

I am facing a challenge with destroying and re-creating the root application component. Below is my template structure:

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

Here is the code I have implemented:

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

When this code runs on button click, it fails to properly clean the template and refresh the data being passed. Can you help me understand why this might be happening?

javascript vue.js

Answer 1

Answer №1

It seems like you may be trying to approach a problem in a manner that is not recommended or possibly misusing Vue.

Regarding your issue, the code snippet you provided:

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

According to the documentation:

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

The documentation does not mention that the element to which the Vue app is attached will change automatically. If you want to clean up the DOM, you need to remove the content manually.

After executing app.$destroy(), the variable app will still hold the destroyed Vue instance (it won't be unset magically). Subsequent executions of the code will not trigger the else block. You also need to set app to something that evaluates as falsy.

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

Now that app is set to undefined, the next time the if statement is evaluated, the else block will be executed and a new instance will be created.

Answer 2

It seems like you may be trying to approach a problem in a manner that is not recommended or possibly misusing Vue.

Regarding your issue, the code snippet you provided:

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

According to the documentation:

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

The documentation does not mention that the element to which the Vue app is attached will change automatically. If you want to clean up the DOM, you need to remove the content manually.

After executing app.$destroy(), the variable app will still hold the destroyed Vue instance (it won't be unset magically). Subsequent executions of the code will not trigger the else block. You also need to set app to something that evaluates as falsy.

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

Now that app is set to undefined, the next time the if statement is evaluated, the else block will be executed and a new instance will be created.

Answer 3

Answer №2

The scenario you mentioned is quite general and lacks specific details, however, it seems like you're looking to manually update something that isn't refreshing automatically.

In order to refresh your component, you can utilize

this.$forceUpdate()

to trigger a forced reload of the component.

Answer 4

The scenario you mentioned is quite general and lacks specific details, however, it seems like you're looking to manually update something that isn't refreshing automatically.

In order to refresh your component, you can utilize

this.$forceUpdate()

to trigger a forced reload of the component.

Build a brand new root component in Vue JS

Answer №1

Answer №2

Similar questions

Iteratively traverse the object to establish connections between parent and child elements

Ways to alter and remove ArrayList arrangement

Ways to create a clickable anchor tag without using any text

Finding the value of an input without having to submit it first and searching for it within a datalist

Guide to using Vue.js and Vue Router to create a sub menu for the children of the current route

the specified computed property does not have a value assigned

I am in need of a blank selection option using an md-select element, and I specifically do not want it to be

Using iScroll without animation by using scrolltoelement on an iPhone PhoneGap application

Anticipate await and fulfill promises

Adjusting the line-height in CSS dynamically based on the length of characters using jQuery

JavaScript - The progression of a virtual pet even when the user is offline

Clearing AsyncStorage in React Native

Leveraging a component as a property of an object in Vue version 3

Provide a unique <li> attribute for the JavaScript function to utilize

How to resolve: Preventing Ajax - Post request from executing repetitively

Ensure that the div remains fixed at the bottom even when multiple items are added

Step-by-step guide on dynamically fetching additional images from a directory using php, jquery, and ajax

Save the JSON data into a variable inside a React utility component

You cannot convert a function to a string while utilizing axios get in nuxtServerInit

Instructions for adding and deleting input text boxes on an ASP.NET master page