283

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/

zcoop98
  • 2,590
  • 1
  • 18
  • 31
geckob
  • 7,680
  • 5
  • 30
  • 39

4 Answers4

436

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.

tony19
  • 125,647
  • 18
  • 229
  • 307
Saurabh
  • 71,488
  • 40
  • 181
  • 244
  • 16
    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` – geckob Dec 05 '16 at 06:59
  • @geckob you passed the event from HTML: `v-on:input` ? – Saurabh Dec 05 '16 at 07:09
  • Not sure this is related or not, but I am using vue-router and this happens in one of the partials – geckob Dec 05 '16 at 07:20
  • 9
    @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)"` – williamukoh Jun 20 '17 at 17:51
  • 6
    You should pass `$event`, not `event` – MikeT Oct 11 '17 at 14:23
  • These magic "special" $variables, bruh... Spent some time trying to figure out the type of it ;D The type is `Event` for fellow typescript users – Seangle Dec 26 '22 at 04:35
50

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.

tony19
  • 125,647
  • 18
  • 229
  • 307
xpuu
  • 1,514
  • 13
  • 13
22

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>

jasonlfunk
  • 5,159
  • 4
  • 29
  • 39
  • 5
    +1 though [always use kebab-case for event names](https://vuejs.org/v2/guide/components-custom-events.html#Event-Names) – mori Oct 08 '20 at 08:06
10

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>
MD SHAYON
  • 7,001
  • 45
  • 38
  • 1
    You can also use the special `$event` variable for a shorter expression: `@click="deleteHandler($event, args1)"`. – exmaxx Mar 21 '22 at 16:07