Passing event and argument to v-on in Vue.js

Question

I pass a parameter in v-on:input directives. If I don't pass it, I can access the event in the method. Is there any way I can still access the event when passing the parameter to the function? Note that I am using vue-router.

This is without passing the parameter. I can access the event object:

HTML

<input type="number" v-on:input="addToCart" min="0" placeholder="0">

Javascript

methods: {
  addToCart: function (event) {
    // I need to access the element by using event.target
    console.log('In addToCart')
    console.log(event.target)
  }
}

This is when passing the parameter. I can't access the event object:

HTML

<input type="number" v-on:input="addToCart(ticket.id)" min="0" placeholder="0">

Javascript

methods: {
  addToCart: function (id) {
    // How can I access the element by using event
    console.log('In addToCart')
    console.log(id)
  }
}

Here is a fiddle of the code, it should be good enough to replicate the problem that I am having:

https://jsfiddle.net/lookman/vdhwkrmq/

tony19 · Accepted Answer · 2022-07-15 19:36:04Z

460

If you want to access event object as well as data passed, you have to pass event and ticket.id both as parameters, like following:

HTML

<input type="number" v-on:input="addToCart($event, ticket.id)" min="0" placeholder="0">

Javascript

methods: {
  addToCart: function (event, id) {
    // use event here as well as id
    console.log('In addToCart')
    console.log(id)
  }
}

See working fiddle: https://jsfiddle.net/nee5nszL/

Edited: case with vue-router

In case you are using vue-router, you may have to use $event in your v-on:input method like following:

<input type="number" v-on:input="addToCart($event, num)" min="0" placeholder="0">

Here is working fiddle.

edited Jul 15, 2022 at 19:36

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Dec 4, 2016 at 8:36

Saurabh

73.8k44 gold badges193 silver badges251 bronze badges

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

6 Comments

geckob Over a year ago

I tried but I get the error message

Property or method "event" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option

Saurabh Over a year ago

@geckob you passed the event from HTML: v-on:input ?

geckob Over a year ago

Not sure this is related or not, but I am using vue-router and this happens in one of the partials

williamukoh Over a year ago

@Saurabh @geckob In order to avoid the error, you need to pass the special $event variable to the method call v-on:input="addToCart($event, num)"

MikeT Over a year ago

You should pass $event, not event

|

xpuu · Accepted Answer · 2025-05-06 15:10:37Z

53

You can also do something like this...

<input @input="myHandler('foo', 'bar', ...arguments)">

Evan You himself recommended this technique in one post on Vue forum. In general some events may emit more than one argument. Also as documentation states internal variable $event is meant for passing original DOM event.

Update:

Unfortunately, this doesn’t work in Vue 3 anymore with standard DOM events; you can only use it when you emit your custom event like $emit('input', 1, 2, 3). For native DOM events, you need to resort to: <input @input="myHandler('foo', $event)">

edited May 6 at 15:10

answered May 15, 2018 at 15:44

xpuu

1,67415 silver badges16 bronze badges

4 Comments

Илья Зелень Over a year ago

jsfiddle.net/50wL7mdz/30115 Note the spread syntax will be transpiled when using *.vue components, but not if you use in-browser compilation.

Raphael Over a year ago

there is a difference between "...arguments" and "$event"?

Piotr Dawidiuk Over a year ago

@Raphael There is a difference! With "$event" argument you pass only one argument from the event.

user2961443 Over a year ago

This solution works, unlike the other one. It does allow to pass multiple arguments as Raphael mentioned.

jasonlfunk · Accepted Answer · 2019-12-28 08:00:16Z

24

Depending on what arguments you need to pass, especially for custom event handlers, you can do something like this:

<div @customEvent='(arg1) => myCallback(arg1, arg2)'>Hello!</div>

answered Dec 28, 2019 at 8:00

jasonlfunk

5,2695 gold badges32 silver badges39 bronze badges

1 Comment

mori Over a year ago

+1 though always use kebab-case for event names

MD SHAYON · Accepted Answer · 2021-09-08 05:18:00Z

12

I like this way of passing parameters because we can pass events and parameters both using an anonymous callback function.

<button v-on:click="(e)=>deleteHandler(e, args1)" > Click me </button>

answered Sep 8, 2021 at 5:18

MD SHAYON

8,11156 silver badges43 bronze badges

1 Comment

exmaxx Over a year ago

You can also use the special $event variable for a shorter expression: @click="deleteHandler($event, args1)".

Collectives™ on Stack Overflow

Passing event and argument to v-on in Vue.js

4 Answers 4

Edited: case with vue-router

6 Comments

Update:

4 Comments

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Edited: case with vue-router

6 Comments

Update:

4 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related