I have a custom input validation ponent that I use in a form. Something like 15 instances of this ponent around the app. It has a beforeDestroy method in which I unsubscribe from global event called triggerGlobalValidation which triggers validation before I send request to server. As expected it's triggered only once inside this certain ponent.

There is a container with v-if parameter which contains one instance of the ponent. So when v-if="false" I expect this certain ponent to unsubscribe from event and get destroyed. It goes well accept for one thing: somehow this ponent unsubscribes ALL other instances of it from the triggerGlobalValidation event as well.

I've tested the behavior with v-show and it works as expected - all other instances keep subscribed, but since the v-show field is required for the form it's blocking validation even without being shown in the DOM. I also tested above mentioned ponents behavior by removing the this.$root.$off("triggerGlobalValidation") and it also works as expected + polluting the global root.

Vue documentation on $off method is saying:

If no arguments are provided, remove all event listeners;

If only the event is provided, remove all listeners for that event;

If both event and callback are given, remove the listener for that specific callback only.

Is it possible to somehow mention in the callback, that this $off method shouldn't unsubscribe all of its instances from the event, but just this certain one being destroyed?

Check it out in codesandbox

I have a custom input validation ponent that I use in a form. Something like 15 instances of this ponent around the app. It has a beforeDestroy method in which I unsubscribe from global event called triggerGlobalValidation which triggers validation before I send request to server. As expected it's triggered only once inside this certain ponent.

There is a container with v-if parameter which contains one instance of the ponent. So when v-if="false" I expect this certain ponent to unsubscribe from event and get destroyed. It goes well accept for one thing: somehow this ponent unsubscribes ALL other instances of it from the triggerGlobalValidation event as well.

I've tested the behavior with v-show and it works as expected - all other instances keep subscribed, but since the v-show field is required for the form it's blocking validation even without being shown in the DOM. I also tested above mentioned ponents behavior by removing the this.$root.$off("triggerGlobalValidation") and it also works as expected + polluting the global root.

Vue documentation on $off method is saying:

If no arguments are provided, remove all event listeners;

If only the event is provided, remove all listeners for that event;

If both event and callback are given, remove the listener for that specific callback only.

Is it possible to somehow mention in the callback, that this $off method shouldn't unsubscribe all of its instances from the event, but just this certain one being destroyed?

Check it out in codesandbox

• javascript
• vue.js

• 1 it is right there in the docs, pass the second argument. this.$root.$off('triggerGlobalValidation', yourHandler) – Radu Diță Commented Mar 22, 2019 at 11:11
• So what kind of handler should it be? The only thing I need is to unsibscribe destroyed element from the event – rreckonerr Commented Mar 22, 2019 at 11:14

1 Answer 1

As answered in the issue, you need to save the handler and pass it again to $off

mounted() {
  this.fn = () => {
    this.toggleWarning();
  }
  this.$root.$on("triggerChildComponents", this.fn);
},
beforeDestroy() {
  this.$root.$off("triggerChildComponents", this.fn);
},