[Solved]-Vue event bus await mount-node.js

OK, so you’ve got a little chicken and egg problem there. You have an element you need to update via refs (some way to hack data into a 3rd party plugin), but you get the data BEFORE you mount the HTML.

What you need to do is separate out the immediate catch into a data variable, then on mount, check to see if it exists and if so update the HTML element.

I’m not answering your question above, because the problem is simplified in the codesandbox example you provided.

Here is the solution based on that:

codesandbox.io/s/3rnyp31n4p

<script>
import { EventBus } from '../eventBus.js'

export default {
  data: () => ({
    immediateMessage: null
  }),
  beforeCreate() {
    EventBus.$on("immediate-message", message => {
      this.immediateMessage = message;
    });
  },
  mounted() {
    if (this.immediateMessage) {
      this.$refs.immediateMessageEl.innerHTML += this.immediateMessage;
    }
    EventBus.$on("delayed-message", message => {
      this.$refs.delayedMessageEl.innerHTML += message;
    });
  }
};
</script>

Note, the beforeCreate() binds to the event and sets a variable, then we use that variable once the DOM is mounted.

Check out lifecycle hooks page for more info v2.vuejs.org/v2/guide/instance.html#Lifecycle-Diagram

This is definitely not the most elegant solution, but will definitely get you going.