[Vuejs]-How to pass a template variable to event handler method in Vue js

by

2👍

✅

<tbody v-for="contact in contacts">
    <tr v-on:click="selectContact(contact.index)">

or simply

<tbody v-for="contact in contacts">
    <tr @click="selectContact(contact.index)">

v-on directive will evaluate the string as an expression. You don’t have to insert extra {{ }}.

👤Leo

1👍

Adding to Leo’s answer, if you are looking for getting index of v-for loop than you have to do following:

<tbody v-for="(contact, index) in contacts">
    <tr v-on:click="selectContact(index)">
👤Saurabh

1👍

Second code resulting error that is related to interpolation

<tbody v-for="contact in contacts">
    <tr v-on:click="selectContact({{contact.index}})">

Why this happening ? Because you are using templating part {{}} into v-on:click directive, which VueJS see as normal aka vanilla JS, so it can’t accept the templating here {{}} – mustaches.

Previous answers give you correct and working solutions.

👤Belmin Bedak

Leave a comment