Menu
I have a component which is mounted as part of the DOM rendering. The skeleton of the application is
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>title</title> </head> <body> <div id="app"> <my-component></my-component> <button>press this button to reload the component</button> </div> </body> </html> <my-component> is functional (it displays a few form inputs) and $emit data to the parent.
Is there a way to re-mount it? The goal is to have a component content and setup as if it was just rendered for the first time (including a reset of the data() elements which hold its state).
There are some solutions to that but they all assume a rewrite of data(), which I would like to avoid.
My understanding is that a component is actuall HTML/CSS/JS code injected in the dom in the right place during the rendering so I fear that the concept of "re-mounting" it does not exist - I just wanted to make sure before going the data()-rewrite way.
971
To remount a component in Vue. js, we should change the key prop of the component. to set the key prop of my-component to componentKey . And then we add a button to toggle the componentKey between true and false .
To reset a component's initial data in Vue. js, we can create a function that returns the initial data. Then we can call the function to reset the data. to create the initialState function that returns an object with the initial data.
Vue calls the mounted() hook when your component is added to the DOM. It is most often used to send an HTTP request to fetch data that the component will then render. For example, the below Vue component uses the mounted() hook to make an HTTP request to the JSONPlaceholder API.
When the key changes, vue regards it as a new component, so it will unmount the "old" component, and mount a "new" component.
See example, the created() hook will only run once, so if you see the value change, you're seeing a brand new object.
example:
Vue.component('my-component', { template: `<div>{{ rand }}</div>`, data() { return { rand: '' } }, created() { this.rand = Math.round(Math.random() * 1000) } }); new Vue({ el: '#app', data: { componentKey:0 } })<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.8/vue.min.js"></script> <div id="app"> <my-component :key="componentKey"></my-component> <button @click="componentKey=!componentKey">press this button to reload the component</button> </div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
