Passing Arguments to Event Listeners

This entry is part 10 of 11 in the series Vue.js: From Beginner to Professional

By default, the native JavaScript event object is passed as the first argument to the method that we define, unless we actively change this. Adding an event parameter to the method will thus give us access to this object, and we can output it to the console to see what it looks like.

new Vue({
	el: '#app',
	methods: {
		clickedButton: function(event) {
			console.log(event);
			alert("You clicked the button!");
		}
	}
});

Note that you are free to choose the name of the parameter. Opening the browser’s console and running the code will show a MouseEvent object after clicking the button. This is a native JavaScript object and has nothing to do with Vue.js. For other types of events, we would of course see different event objects being passed as the first argument.

Perhaps you noticed that I did not add any parenthesis after the method name. You could do this, but then there is something to watch out for. Let’s go ahead and do it and see what happens.


<button v-on:click="clickedButton()">Click here!</button>

We still get the alert as before, but notice that we now see undefined being output in the console, instead of a MouseEvent object as before. What just happened is that we changed from defining the method name to adding an expression – in this case a method invocation. When we do this, Vue.js no longer passes the native JavaScript event object as an argument automatically, and that is why the method parameter is undefined. But what if we do want to access the event object within our method? Vue.js allows us to specify a special argument named $event, which ensures that the native event object is passed as an argument at that particular position. Adding that between the parenthesis should give us what we expect.


<button v-on:click="clickedButton($event)">Click here!</button>

And indeed we see the MouseEvent object being output once again.

As I mentioned, we can determine in which position we want the event argument to be passed. Let’s say that we want to pass a message for the alert as the first argument to the method, and the event as the second argument. We can do this as you would expect, by first adding another parameter to the method, and then passing a string as an argument.

new Vue({
	el: '#app',
	methods: {
		clickedButton: function(message, event) {
			console.log(event);
			alert(message);
		}
	}
});

<button v-on:click="clickedButton('Hello World!', $event)">Click here!</button>

With this, we still see the event object being output in the console, and the alert now displays the message.

Therefore, if you need to pass in your own arguments to a method, then you need to include parenthesis in the expression, and by doing so, you must use the $event argument if you want to access the native JavaScript event object. If you don’t need any custom arguments, then you can just enter the name of the method, and the event object will be passed as an argument by default, regardless of whether or not you use it. You could of course also define the method name with parenthesis and optionally the $event argument, if you prefer. I personally like always including the parenthesis, because it is a very explicit way of showing that we are indeed invoking a method – but that’s just a personal preference, and what you want to do is totally up to you.

Series Navigation<< Introduction to Vue EventsVue Directive & Event Modifiers >>

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *