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 · Accepted Answer · 2019-02-03 00:09:44Z

1

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
    }
  }
}

answered Feb 3, 2019 at 0:09

Decade Moon

34.4k8 gold badges84 silver badges104 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Michael Houser · Accepted Answer · 2019-02-03 16:29:07Z

0

Your reply helped me find the solution. In my close method, all i needed to do was add "EventBus.$off('request-item-details')". That took care of it. Guilty of Overthinking again. Thanks!

answered Feb 3, 2019 at 16:29

Michael Houser

12 bronze badges

Collectives™ on Stack Overflow

Closing bootstrap vue modal doesn't unbind event

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related