javascript - Vue.js: EventBus being called multiple times - Stack Overflow

admin管理员组

文章数量:1287591

I'm building the logic for an 'undo delete' - action. For that, I'm using an Event Bus to send an event to two unrelated ponents like so:

Undo.vue:

EventBus.$emit(`confirm-delete-${this.category}`, this.item.id);

The name of the event(this.category) is based on props ing from a parent (ConfirmDeleteModal.vue) and then received as follows:

CategoryA.vue

created() {
   EventBus.$on('confirm-delete-category-a', (id) => {
     this.confirmDelete(id);
   });
},

CategoryB.vue

created() {
    EventBus.$on('confirm-delete-category-b', (id) => {
      this.confirmDelete(id);
    });
},

My issue: For some reason, the event for category-a is emitted and received twice (category-b works fine). I have to listen to the confirm-event constantly, therefore I can't remove the event listener after I received the event or listen only $once. Any ideas how to solve this (maybe with Vuex)? Thanks!

I'm building the logic for an 'undo delete' - action. For that, I'm using an Event Bus to send an event to two unrelated ponents like so:

Undo.vue:

EventBus.$emit(`confirm-delete-${this.category}`, this.item.id);

The name of the event(this.category) is based on props ing from a parent (ConfirmDeleteModal.vue) and then received as follows:

CategoryA.vue

created() {
   EventBus.$on('confirm-delete-category-a', (id) => {
     this.confirmDelete(id);
   });
},

CategoryB.vue

created() {
    EventBus.$on('confirm-delete-category-b', (id) => {
      this.confirmDelete(id);
    });
},

My issue: For some reason, the event for category-a is emitted and received twice (category-b works fine). I have to listen to the confirm-event constantly, therefore I can't remove the event listener after I received the event or listen only $once. Any ideas how to solve this (maybe with Vuex)? Thanks!

• javascript
• vue.js
• vuex
• vue-events

Share Improve this question Follow edited Jun 18, 2022 at 15:26 Houssem 7,59833 gold badges2020 silver badges3030 bronze badges asked Feb 25, 2020 at 9:06 suuuriamsuuuriam 7471414 silver badges2727 bronze badges 3

• 1 Probably because created runs twice? Did you debug it? Depends on how you use these ponents. – Estus Flask Commented Feb 25, 2020 at 9:11
• But CategoryA and CategoryB are different ponents, so created doesn't really run twice, does it? – suuuriam Commented Feb 25, 2020 at 9:20
• Since category-a is received twice and category-b is not, there's clearly a difference between A and B somewhere. Please, provide stackoverflow./help/mcve that can replicate the problem. – Estus Flask Commented Feb 25, 2020 at 9:23

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 14

I was also facing the same kind of issue and then after some research, I got this solution.

You have defined your ponent CategoryA.vue two times in your application which is causing the function to run twice which is in this case CategoryA.vue

Solution: You have to call destroyed() after the created() Like:

created() {
    EventBus.$on('confirm-delete-category-a', (id) => {
      this.confirmDelete(id);
    }),
},
destroyed() {
    EventBus.$off('confirm-delete-category-a');
},

本文标签： javascriptVuejs EventBus being called multiple timesStack Overflow