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?

javascriptvue.js

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

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.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What could be the reason behind the error message stating that the Vue JS method function "validEmail

An error is generated by the validEmail function that says "error 'validEmail' is not defined" <script> export default { data() { return { accountEmail: "", accountEmailVerify: "" }; }, methods: ...

vue.jsvuejs2

Is there a way for me to automatically generate and send a random collection each time a GET request is made on my Node.js

I have been developing a typing application that utilizes an API to fetch random quotes from . I successfully created an API using MongoDB, Node.js, and Express which functions well. However, I encountered an issue when trying to send a random collection ...

javascriptnode.jsmongodbexpressmongoose

Issues with navigation menus in Bootstrap/Wordpress

My mobile drop-down menu is giving me some strange issues. When you toggle the button, the menu briefly appears just below the button before moving to its correct position. Sometimes it doesn't work at all, and clicking has no effect. You can witnes ...

javascriptcsswordpressbootstrap-4

Creating dynamic content in the Ajax-enabled Smart Admin theme: A step-by-step guide

As I work on developing an application for a client, my focus is on creating a web service using Laravel5 for the backend. To enhance the user interface of this web service, I have chosen to incorporate the Smart Admin Theme, specifically utilizing the Aja ...

javascriptjqueryajaxlaravel-5smartadmin

Problem encountered while generating a torus shape using webGL

I am currently developing a program that aims to create 3D parametric shapes using webgl. The current code I have works successfully for rendering a sphere, but when I try switching the equations for a torus, only the upper half of the torus is being displ ...

javascripthtmlgraphicsopengl-eswebgl

Utilizing Kendo MVVM to Bind to an Self-Executing Anonymous Module Function

Currently, I am experimenting with the Kendo UI MVVM framework and attempting to bind it to a self-executing anonymous modular function. The situation is a bit complex, as the functionality is only somewhat working. Although the module is being updated whe ...

htmlkendo-mvvmjavascript

the term 'this' does not pertain to the user object within the mongoose model

Here is a snippet of my code that saves a user object to a database using Express: api.post('/signup', function (req, res) { var user = new User(); user.name = req.body.name; user.email = req.body.email; user.setPassword(req.body ...

javascriptnode.jsexpressmongoose

Tips on arranging jQuery deferred objects in order?

I am facing an issue where I need to delay every Ajax call until the previous function (hashcode.Sign()) has completed. Unfortunately, my current code does not wait for hashcode.Sign() to finish, causing problems as this function creates a new session that ...

javascriptjqueryajaxjquery-deferred

Retrieving data from a <div> element within an HTML string using jQuery and AJAX

Having trouble extracting a value from a div within an HTML string. Seeking assistance in identifying the issue. I've attempted various methods to retrieve the data, but none seem to work for me. It appears I may be overlooking something crucial. $( ...

javascriptjqueryhtmlajax

Submit form data asynchronously using Ajax and serialize the form data before posting

I'm currently facing an issue with posting HTML form values in my code. Everything works fine except for the fact that I can't get it to post single quotes ' . I believe this problem is caused by the usage of serialize. I've attempted c ...

javascriptjqueryhtmlajax

What benefits does utilizing Microsoft Workflow Foundations offer?

I am currently working with an investor who is pushing for us to utilize Microsoft Work Flow Foundations for our workflow and database. However, I have already created an interactive graph-database using Javascript, Node.Js, and ArangoDB that perfectly su ...

javascriptnode.jsworkflow-foundationgraph-databasesarangodb

The div has extra white space at the bottom due to the Hide/Show content feature

Having trouble stretching a scrolling div to 100% of its parent container's height? The Hide/Show content feature is causing whitespace at the bottom of the div. Check out the jsfiddle here: http://jsfiddle.net/fkvftff2/1/ LATEST UPDATE: The issue a ...

javascripthtmlcss

Tips for successfully implementing Typeahead with Bloodhound and a JSON response

Looking for guidance on integrating typeahead.js with bloodhound.js to leverage my JSON data structure. My goal is to implement a type-ahead feature utilizing a preloaded JSON object that remains accessible. Here's the breakdown: The Data/All URL res ...

javascriptjqueryjsontypeahead.jsbloodhound

The comparison between form submission and AJAX request when transmitting data in JSON format

Working on a complex PHP/Drupal project, our team is facing the challenge of enabling a deep link into a page that requires extensive data to be passed from the originating site. We have full control over both ends so cross-domain issues are not a concern ...

javascriptphpjsonajaxforms

Can JavaScript event listeners be compelled to trigger in a specific sequence?

Is there a way in JavaScript to receive notification or execute a callback function once an event has completed its propagation? Put differently, is it possible to 'prioritize' an event and ensure that it gets triggered after all other event lis ...

javascriptreactjs

Sending POST data to a PHP file without the use of jQuery results in AJAX malfunction

I have been struggling to make an ajax alert layer work with a POST method for the past few days, and I cannot figure out why it is not functioning. I have successfully used the same code structure to send form data through ajax using POST on other admin p ...

javascriptphpajaxpost

Is it possible to assign multiple ID's to a variable in jQuery?

I am currently using a script for a slider known as Slicebox, and in order to have different image sizes for mobile and desktop views, I need to duplicate the feature on my website. Although it's not ideal, I really like this slider and want to explo ...

javascriptjquery

React's `setState` function seems to be failing to hold onto

Recently, I've been challenged with creating an infinite scroll loader component. However, I'm facing a peculiar issue where my 'items' array is constantly resetting to [] (empty) instead of appending the new results as intended. A cou ...

javascriptreactjsnext.jsfetch

Update the text in a personalized dropdown menu when an option is chosen

After spending some time working on a customized dropdown with the use of CSS and Vanilla JavaScript (Plain JS), I encountered an issue while trying to select and update the dropdown text upon clicking an option: window.onload = () => { let [...opt ...

javascripthtmlcssecmascript-6dropdown

Issue with optimizing in Webpack 4

It's past 2am and I find myself going crazy trying to identify an error. The console keeps repeating the message: "Error: webpack.optimize.UglifyJsPlugin has been removed, please use config.optimization.minimize instead." I've attempted modifyi ...

javascriptjsonreactjswebpack