Passing Arguments to Event Listeners

Published on February 11, 2017 by

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) {
			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) {
<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.


Learn Vue.js today!

Take an online course and become an Vue.js champion!

Here is what you will learn:

  • How to build advanced Vue.js applications (including SPA)
  • How Vue.js works under the hood
  • Communicating with services through HTTP
  • Managing state of large applications with Vuex
  • ... and much more!
Vue.js logo
Author avatar
Bo Andersen

About the Author

I am a back-end web developer with a passion for open source technologies. I have been a PHP developer for many years, and also have experience with Java and Spring Framework. I currently work full time as a lead developer. Apart from that, I also spend time on making online courses, so be sure to check those out!

Leave a Reply

Your e-mail address will not be published.