[Vuejs]-Open modal dialog on event bus event

by

3👍

✅

This is happening because you are not using an Arrow function. Instead of a plain function, use arrow function like this:

mounted () {
    // Note the use of arrow function.
    EventBus.$on('ShowLoginDialog', (isVisible) => {
      // .. All your code
    })
}

If you use plain function function () {}, then this pointer is not accessible within inner function. Arrow function will lexically bind this pointer to mounted() function’s this context. So use an arrow function i.e. () => {};

Note: If you insist on using plain old function syntax then use closure variable to keep track of this pointer:

mounted () {

    // Assign this pointer to some closure variable
    const vm = this;

    EventBus.$on('ShowLoginDialog', function (isVisible) {
      console.log('Setting ShowLoginDialog isVisible=' + isVisible + '. isLoginDialogVisible=' + vm.isLoginDialogVisible)
      if (isVisible) {
        vm.isLoginDialogVisible = true
      } else {
        vm.isLoginDialogVisible = false
      }
      console.log('Finished setting isLoginDialogVisible=' + vm.isLoginDialogVisible)
    })
}

This has nothing to do with Vue.js. It is a typical JavaScript behavior.

👤Harshal Patil

2👍

I believe your listener for the EventBus events needs to be accessible to App. Right now EventBus and App are two separate instances. You could mount the event handler inside App like this:

mounted () {
   EventBus.$on('ShowLoginDialog', function (isVisible) {
      ...
    });
👤Steven Kuipers

Leave a comment