[Vuejs]-Debugging a program that involves EventBus communication between multiple files

by

0👍

Assuming you’re seeing the console.log messages when they are uncommented in App.vue for eventBus.$on('refreshMessages') and eventBus.$on('sentMessage') it looks like a scoping issue to me.

When using an event bus, this in the context of your event handler is the eventBus object itself, not the component. You can save the component this to a local variable and use it in your event handler functions. Something like this:

created(){
  // Save the component to a local variable for use in event callbacks
  var that = this;

  eventBus.$on('sentMessage', (data) => {
      // notice the differences between these two objects
      console.log(this, that); 

      console.log('eventBus called on created in App.vue!');
      let temp = [data.message];
      that.message = temp.concat(that.messages.slice(0));
      console.log('new message concatinated!');

  });

  eventBus.$on('refreshMessages', () => {
  //    console.log('page refresh got called!')
      let randomIndex = Math.floor(Math.random() * randomMessages.length);
      let temp = [randomMessages[randomIndex]];
      that.messages = temp.concat(that.messages.slice(0));
  //    console.log('page refreshed!');
  });
},

Leave a comment