VueJS 2 can't emit event in mounted(), created() hooks

Question

Out of the blue, emitter stopped working:

event-bus.js

import Vue from 'vue';
export const EventBus = new Vue();

import { EventBus } from '../event-bus';

...

mounted() {
  this.getCart();
}

...

methods: {
      getCart() {
        axios.get(`${app.api_erp_url}/cart/${this.cartId}`).then((response) => {
          this.cart = response.data;
          EventBus.$emit('cartLoaded', this.cart); // this not working
        });
      }
},

another-component.vue

mounted() {
      // MiniCart.vue
      EventBus.$on('cartLoaded', (payload) => {
        ...
      });
    },

No matter how I try to emit the event inside mounted/created, it will not work. No problems when firing events on click or something.

Created sandbox: https://codesandbox.io/s/gracious-kilby-m43ih?fontsize=14&hidenavigation=1&theme=dark

put debugger one line above - check EventBus events array - if empty other component hasnt registered anything yet, if debugger never triggers axios throws — Estradiaz, Oct 30 '20 at 11:46
Yes I'm sure: https://codesandbox.io/s/gracious-kilby-m43ih?fontsize=14&hidenavigation=1&theme=dark — RomkaLTU, Oct 30 '20 at 12:19
@RamkatLTU Try adding listener in `created:hook` not `mouted`. I have a feeling that your `$on` might not be "in place" before `event` is `$emitted` — Adam Orłowski, Oct 30 '20 at 12:32

score 3 · Accepted Answer · answered Oct 30 '20 at 21:31

Child components mount before their parent component.

This is the sequence occurring in your example:

HelloWorld (parent) is created
Test (child) is created
Test (child) is mounted, which emits an event
HelloWorld (parent) is mounted, which subscribes to the event that was already emitted

If you want HelloWorld to catch the event from its children, subscribe to the event in the created hook.

demo

score 1 · Answer 2 · edited Jul 15 '22 at 23:02

1

According to this You should use kebab-case format to name your custom events :

EventBus.$emit('cartLoaded', this.cart);//not correct

EventBus.$emit('cart-loaded', this.cart); //correct

edited Jul 15 '22 at 23:02

tony19

125,647
18
229
307

answered Oct 30 '20 at 11:50

Boussadjra Brahim

82,684
19
144
164

This is a good practice but it should work even with `camelCase`. The compilier change it anyway. – Adam Orłowski Oct 30 '20 at 11:52
@AdamOrlov it's the only correct syntax, please check this https://vuejs.org/v2/guide/components-custom-events.html#Event-Names – Boussadjra Brahim Oct 30 '20 at 11:54
1

"For these reasons, we recommend you always use kebab-case for event names." Still good practice, not "only correct syntax". – Adam Orłowski Oct 30 '20 at 11:56
1

I actually use camelCase and it working for other events, anyway changed to kebab-case still same problem. – RomkaLTU Oct 30 '20 at 11:57
it's weird, could provide a sample code in codesandbox? – Boussadjra Brahim Oct 30 '20 at 12:00
I will try, what is super strange that getCart is actually sending request and receiving data. – RomkaLTU Oct 30 '20 at 12:06
Try to enrich this https://codesandbox.io/s/q9r70817vj – Boussadjra Brahim Oct 30 '20 at 12:08
Already created: https://codesandbox.io/s/gracious-kilby-m43ih?fontsize=14&hidenavigation=1&theme=dark – RomkaLTU Oct 30 '20 at 12:20
@RamkatLTU Try adding listener in `created:hook` – Adam Orłowski Oct 30 '20 at 12:22
@RomkaLTU the issue happened when you emit an event from lifecycle hook, if you add a handler that runs emit this will work https://codesandbox.io/s/lucid-wing-e1z44?file=/src/components/Test.vue – Boussadjra Brahim Oct 30 '20 at 12:43

score 0 · Answer 3 · answered Oct 30 '20 at 20:49

May be the event emitted before MiniCart.vue component registered the event.

Meaning in code.

  EventBus.$emit('cartLoaded', this.cart);

this run first time before the event has been registered

EventBus.$on('cartLoaded', (payload) => {
        ...
      });

VueJS 2 can't emit event in mounted(), created() hooks

3 Answers3

Linked