How to pass a parameter to Vue click event handler

Question

I am creating a table using Vue js and I want to define an onClick event for each row that passes contactID  Here is the code     lt tr v-for  item in items  class  static       v-bind class    evenRow   item oddeven   1    oddRow   item oddeven   0      click  addToCount   item contactID      gt       lt td gt   item contactName   lt  td gt       lt td gt   item recipient   lt  td gt   lt  tr gt       On clicking a row  it is calling addToCount    which is working  I want to pass item contactID to addToCount    Could someone suggest the correct syntax for this

User · Answer

Just use a normal Javascript expression  no    or anything necessary    click  addToCount item contactID     if you also need the event object    click  addToCount item contactID   event

User · Answer

When you are using Vue directives  the expressions are evaluated in the context of Vue  so you don t need to wrap things in       click is just shorthand for v-on click directive so the same rules apply   In your case  simply use  click  addToCount item contactID

User · Answer

I had the same issue and here is how I manage to pass through  In your case you have addToCount   which is called  now to pass down a param when user clicks  you can say  click  quot addToCount item contactID  quot  in your function implementation you can receive the params like  addToCount paramContactID       the paramContactID contains the value you passed into the function when you called it     you can do what you want to do with the paramContactID in here

[vue.js] How to pass a parameter to Vue @click event handler

Examples related to vue.js