How a component can remove itself in Vue 2.0

Question

as a headline how can i do this

from the official documentation just tell us that $ delete can use the argument 'object' and 'key'

but I want to remove the component as such

this.$delete(this) 

Answer 1

No, you cannot remove the component directly. The parent component will have to use v-if to remove the child component from the DOM.

Link: https://vuejs.org/v2/api/#v-if

Quote from the docs:

Conditionally visualize an element based on the likelihood of the value of an expression. The element and its contained directives / components are destroyed and reconstructed during the switch.

If a child component is created as part of some data object on the parent object, you will need to send the event to parents through $emit , change (or delete) the data, and the child component will be deleted by itself. Recently, another question has arisen: Remove Vue child component

Answer 2

I could not find instructions for completely removing the Vue instance, so here is what I got:

 module.exports = { ... methods: { close () { // destroy the vue listeners, etc this.$destroy(); // remove the element from the DOM this.$el.parentNode.removeChild(this.$el); } } }; 

Answer 3

Instead of removing your component from its parent element, you can still use v-if in the first <div> the component itself. This will leave a blank component on your page, and this is not the best practice, but can avoid handling events from the parent.

Answer 4

You can use the beforeDestroy method for the component and force it to remove itself from the DOM.

 beforeDestroy () { this.$root.$el.parentNode.removeChild(this.$root.$el) },