Sometimes, we want to pass a parameter to Vue @click event handler.
In this article, we’ll look at how to pass a parameter to Vue @click event handler.
How to pass a parameter to Vue @click event handler?
To pass a parameter to Vue @click event handler, we pass the arguments straight into the click event handler.
For instance, we write
<template>
<table>
<tr
v-for="item in items"
:key="item.contactID"
@click="addToCount(item.contactID)"
>
<td>{{ item.contactName }}</td>
<td>{{ item.recipient }}</td>
</tr>
</table>
</template>
<script>
//...
export default {
methods: {
addToCount(paramContactID) {
//...
},
},
};
</script>
to set the click event handler to addToCount on the tr element.
We set it to call addToCount with the item.contactID value as its argument.
And we get the item.contactID value from paramContactID.
Conclusion
To pass a parameter to Vue @click event handler, we pass the arguments straight into the click event handler.