Force reset a Vue Component

In Vue 2.0, resetting a Component would usually mean to reset its internal state. While it is suggested to do this using nested data properties that we can simply assign, we can also use a small hack to completely replace the Component’s $data object like so: https://github.com/vuejs/vue/issues/702 Great, but that is not always enough. What if my component is wrapping a 3rd party library that does all kinds of funky things to the DOM that will not be reset by that? I have found another hack to “reset” a Component, that worked for my particular use case. It is quite brute force and relying on garbage collection, so probably not a great way to do it, but hey, you can give it a try anyways.

Make sure to add your Component to the DOM conditionally:

<my-component v-if="drawComponent"></my-component>

Then to “reset”, remove it from the DOM for one drawing cycle, which will destroy the Vue instance (which the Component ultimately is) and its state with it and then recreate it:

methods: {
  reset: function() {
    var vm = this;
    vm.drawComponent = false;
    Vue.nextTick(function() {
      vm.drawComponent = true;
    });
  }
}

EDIT: It seems we can also trigger a redraw of a component using the :key property: https://vuejs.org/v2/api/#key

After the implementation, guilty written all over his face.
Advertisements

1 Comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s