Sometimes, we want to pass a parameter to Vue.js @click event handler.

In this article, we’ll look at how to pass a parameter to Vue.js @click event handler.

How to pass a parameter to Vue.js @click event handler?

To pass a parameter to Vue.js @click event handler, we can set @click to a function call.

For instance, we write

<template>
  <div id="app">
    ...
    <button @click="addToCount(item.contactID)">add</button>
    ...
  </div>
</template>

to call addToCount with item.contactId.

Then we write

<script>
//...
export default {
  //...
  methods: {
    addToCount(paramContactID) {
      // ... 
    },
  },
  //...
};
</script>

to add the addToCount method which has the paramContactID parameter.

Therefore, paramContactID will be set to item.contactId as its value when we click the button.

Conclusion

To pass a parameter to Vue.js @click event handler, we can set @click to a function call.