Access the event object from global event bus in VueJS

Question

I have some pages (in Laravel) that each includes a form with different action URI's:

<form method="post" action="/route1">
    ...
    <button @click="emitEvent('event1')">
</form>

In Vuejs root I have only a method that calls the event globally:

const app = new Vue({
    el: '#app',
    methods: {
        emitEvent(event, payload) {
            EventBus.$emit(event, payload);
        }
    }
});

In my Component I have a listener for the global event:

data() {
    return {
        someKey: false //this value is dynamic
    }
}
mounted() {
    EventBus.$on('event1', (event) => {
        console.log(event); //returns undefined
        if(this.someKey) {
             window.location = "/another-url"; 
             //Go to this url ONLY if the is true, else go to the url from the action attibute of the form
        }
    });
}

So basically, if a certain condition is meet in vue, I want to load that page.

Right now, the page will load the url from html form even if the condition in vuejs is meet or not.

I tried @click.prevent="emitEvent('event1')" instead of @click but in this way, if the condition is false and the window.location doesn't run, it gets stuck.

I am thinking to access the event object and then manually preventDefault() but only if necesary, so if that's not the case, the page will load the url from the form's action, but I can't find a way to get that event object inside Vue.

I found that the event name is in EventBus._events.event1 but I can't go forward because there are only empty properties and I`m not sure haw can I access the default event so I can prevent it.

I`m sure there it must be a easier/shorter and better way then giving an id/class to each form, then access it, then get its action attribute which is the url I need and finally if access that url if the condition is not meet. This way it may work, but it's an old style maybe?

Anyway, I am stack here and I appreciate any help.

how about moving the click event to form submit event and then return false to that? — Taha Paksu
– Taha Paksu, Commented Mar 28, 2019 at 17:12

tony19 · Accepted Answer · 2022-07-16 00:29:56Z

1

Your error is in the @click-listener, your call:

emitEvent('event1')

calls the function with ONE param, therefore your event-param in your function will always be 'event1' of type 'string'.

To answer your question you would have to change your @click-listener to:

@click="(e) => { emitEvent(e, 'event1') }"

Explanation:

When the @click-listener gets a function as value it will call the function with the event as the first (and only) param. In your case you give the @click-listener an undefined as you dont have a return-value.

Here take a closer look at this doc.

edited Jul 16, 2022 at 0:29

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Mar 28, 2019 at 23:00

Kodiak

5406 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Catalin Farcas Over a year ago

Yes, you are right. That was the missing piece. First I had an error using your code, then I found that the parameters must be reversed because the first one gets sent as the event name and the second one (the event) is actually the payload. But anyway, yes you are right, and now the event.preventDefault() works and the page redirects if the condition is meet. Thank you

Taha Paksu · Accepted Answer · 2019-03-28 17:24:53Z

1

I would go this way (as usual):

<form method="post" action="/route1" @submit="emitEvent('event1')">
    ...
    <button type="submit">
</form>

This way, the submit event will obey the preventions. And then:

var that = this; // added a buffer to use in the event (hackish)
EventBus.$on('event1', (event) => {
    if(that.someKey) {
         window.location = "/another-url";     
         return false; // will prevent submission and change the url
    }
    return true; // will proceed submission
});

edited Mar 28, 2019 at 17:24

answered Mar 28, 2019 at 17:16

Taha Paksu

15.6k2 gold badges50 silver badges83 bronze badges

6 Comments

Catalin Farcas Over a year ago

I just tried, but it loads the same url from the form.

Taha Paksu Over a year ago

Then you might not be accessing someKey. I'll update my answer now.

Catalin Farcas Over a year ago

still no success. Anyway, as I said, I have many pages like that (which includes the form) and I would like to avoid a solution to edit the html on each one, and instead I would like to work on the js side if it's possible.

Taha Paksu Over a year ago

Ok then preventing the form submit with the click event seems very hard, maybe impossible.

Catalin Farcas Over a year ago

Yes, I agree, but I think there must be a way to access that event. I saw it in EventBus._events.event1 .. and some other nested arrays which ends like [[Scopes]], but I can't access it using .(dot) notation ... not sure why. Anyway, thank you for your suggestion.

|

Collectives™ on Stack Overflow

Access the event object from global event bus in VueJS

2 Answers 2

1 Comment

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related