Sometimes, we want to make a component delete itself in Vue.js.

In this article, we’ll look at how to make a component delete itself in Vue.js.

How to make a component delete itself in Vue.js?

To make a component delete itself in Vue.js, we can use the this.$destroy method.

For instance, we write

<script>
//...
export default {
  //...
  methods: {
    close() {
      this.$destroy();
      this.$el.parentNode.removeChild(this.$el);
    },
  },
  //...
};
</script>

to add the close method to call this.$destroy to unmount the component.

And then we call this.$el.parentNode.removeChild(this.$el) to remove the current component’s root element from the DOM.

Conclusion

To make a component delete itself in Vue.js, we can use the this.$destroy method.