1

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

4
  • 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, 2020 at 11:46
  • Are you sure there is no error in axios.get? Oct 30, 2020 at 11:47
  • Yes I'm sure: codesandbox.io/s/…
    – RomkaLTU
    Oct 30, 2020 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 Oct 30, 2020 at 12:32

3 Answers 3

3

Child components mount before their parent component.

This is the sequence occurring in your example:

  1. HelloWorld (parent) is created
  2. Test (child) is created
  3. Test (child) is mounted, which emits an event
  4. 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

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
10
  • This is a good practice but it should work even with camelCase. The compilier change it anyway. Oct 30, 2020 at 11:52
  • @AdamOrlov it's the only correct syntax, please check this vuejs.org/v2/guide/components-custom-events.html#Event-Names Oct 30, 2020 at 11:54
  • 1
    "For these reasons, we recommend you always use kebab-case for event names." Still good practice, not "only correct syntax". Oct 30, 2020 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, 2020 at 11:57
  • it's weird, could provide a sample code in codesandbox? Oct 30, 2020 at 12:00
0

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) => {
        ...
      });

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.