How to pass a parameter to Vue @click event handler

user761100 picture user761100 · Apr 20, 2017 · Viewed 93.1k times · Source

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:

<tr v-for="item in items" class="static" 
    v-bind:class="{'evenRow': item.oddeven=='1', 'oddRow': item.oddeven=='0' }"
@click="addToCount('{item.contactID}')"
>
    <td>{{item.contactName}}</td>
    <td>{{item.recipient}}</td>
</tr>   

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?

Answer

Linus Borg picture Linus Borg · Apr 20, 2017

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)"