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  Not that I am using vue-router   This is without passing the parameter  I can access the event object  HTML   lt input type  number  v-on input  addToCart  min  0  placeholder  0  gt    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   lt input type  number  v-on input  addToCart ticket id   min  0  placeholder  0  gt    Javascript    methods        addToCart  function  id              How can I access the element by using event       console log  In addToCart         console log id              Here is some snippet of the code  should be good enough to replicate the problem that I am having  https   jsfiddle net lookman vdhwkrmq

User · Answer

You can also do something like this      lt input  input  myHandler  foo    bar      arguments   gt    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

User · Answer

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   lt input type  number  v-on input  addToCart  event  ticket id   min  0  placeholder  0  gt    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     lt input type  number  v-on input  addToCart  event  num   min  0  placeholder  0  gt    Here is working fiddle

User · Answer

Depending on what arguments you need to pass  especially for custom event handlers  you can do something like this    lt div  customEvent   arg1    gt  myCallback arg1  arg2   gt Hello  lt  div gt

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

Examples related to vue.js