如何在Vue js中将模板变量传递给事件处理程序方法

Question

This code:

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

is working well in Vue js.

But this:

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

Doesn't seem to work well. Resulting in an error. So how can I pass a environmental variable like contact.index into the event method?

Answer 1

<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 {{ }} .

Answer 2

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

Answer 3

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.