50

as title, how can I do that

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

but I want delete a component by itself like this

this.$delete(this)
0

4 Answers 4

69

I couldn't find instructions on completely removing a Vue instance, so here's what I wound up with:

module.exports = {
  ...
  methods: {
    close () {
      // destroy the vue listeners, etc
      this.$destroy();

      // remove the element from the DOM
      this.$el.parentNode.removeChild(this.$el);
    }
  }
};

Vue 3 is basically the same, but you'd use root from the context argument:

export default {
  setup(props, { root }){
    const close = () => {
      root.$destroy();
      root.$el.parentNode.removeChild(root.$el);
    };
    return { close };
  }
}

In both Vue 2 and Vue 3 you can use the instance you created:

const instance = new Vue({ ... });
...
instance.$destroy();
instance.$el.parentNode.removeChild(instance.$el);
2
  • 1
    To remove DOM element, I did this and it works just fine: root.$el.remove(root.$el); No need the "parentNode" and the "Child" (saved space). Tested on FF/Chrome/Safari
    – Xerix
    Nov 27, 2020 at 8:07
  • How could I implement this.$delete(object, key) ? Jan 3, 2022 at 22:12
43

No, you will not be able to delete a component directly. The parent component will have to use v-if to remove the child component from the DOM.

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

Quoted from docs:

Conditionally render the element based on the truthy-ness of the expression value. The element and its contained directives / components are destroyed and re-constructed during toggles.

If the child component is created as part of some data object on parent, you will have to send an event to parent via $emit, modify (or remove) the data and the child component will go away on its own. There was another question on this recently: Delete a Vue child component

1
  • That only applies if we are talking about a component that does have a parent component. But for root components created manually from js using new Vue() I'll assume @bendytree's answer is the way to go.
    – Klesun
    Nov 1, 2021 at 22:08
7

You could use the beforeDestroy method on the component and make it remove itself from the DOM.

beforeDestroy () {
  this.$root.$el.parentNode.removeChild(this.$root.$el)
},
2
  • 1
    Thanks for the hint. In my case though using your code does not work. I had to use this: beforeDestroy () { this.$el.parentNode.removeChild(this.$el) }, Could you maybe give me a hint why you used $root over the code proposed by @bendytree?
    – Merc
    Apr 10, 2020 at 15:50
  • 1
    It would depend on the architecture of your application, I think now off the top of my head you would need to use $root if it's the only component on the page but if it's a nested component then you wont want to use $root. The more important bit is using the beforeDestroy which will trigger just before the component is naturally destroyed Apr 15, 2020 at 8:46
1

If you just need to re-render the component entirely you could bind a changing key value to the component <MyComponent v-bind:key="some.changing.falue.from.a.viewmodel"/>

So as the key value changes Vue will destroy and re-render your component.

Taken from here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.