Closing bootstrap vue modal doesn't unbind event

Question

I have a bootstrap vue modal on a view page. When save is clicked, the save function emits an event. Works fine. When i close the modal and open it again then click on save, the save function is handled as expected emitting the function, however, it emits it twice (once for each time the modal was opened and closed. If i open and close the modal 5 times then click save, it calls the save function once but emits the function 5 times. I'm not sure how i can unbind the event when the modal closes using either typescript, vue, or bootstrap (any way other than jQuery :). Can anyone advise?

save() {
  EventBus.$emit(MyEvents.RequestItemDetails);
} 

// EventBus.ts
export const EventBus = new Vue();
export enum MyEvents{
RequestItemDetails = "request-item-details"
}

Decade Moon Decade Moon · Accepted Answer · 2019-02-03T00:09:44

You've provided very little code for us to know what the problem actually is, but I'll take a guess.

If you're using a global event bus and you subscribe to an event on that bus from within a component, you need to make sure you unsubscribe from that event when the component is destroyed, otherwise your event handler function will be called multiple times because it gets registered multiple times on the bus.

For example:

import bus from './bus.js'

export default {
  created() {
    bus.$on('request-item-details', this.onRequestItemDetails)
  },

  destroyed() {
    bus.$off('request-item-details', this.onRequestItemDetails)
  },

  methods: {
    onRequestItemDetails() {
      // Handle event
    }
  }
}

Closing bootstrap vue modal doesn't unbind event

2 Answers