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

此代码：

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

在Vue js中运行良好

但这是：

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

似乎不太管用。导致错误。那么，如何将contact.index这样的环境变量传递到事件方法中呢

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

或者干脆

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

v-on

指令将字符串作为表达式进行计算。您不必插入额外的

{{}

或者干脆

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

---

v-on

指令将字符串作为表达式进行计算。如果您要获取v-for循环的索引，则不必在Leo的答案中插入额外的

{{}

，而必须执行以下操作：

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

---

添加到Leo的答案中，如果您希望获得v-for循环的索引，则必须执行以下操作：

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

---

与插值相关的第二个代码错误

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

为什么会这样？因为您正在使用模板将部分

{{}}

设置为

v-on:click

指令，VueJS将其视为普通的aka vanilla JS，所以它无法接受此处的模板

{}

-mustaches

---

前面的答案为您提供了正确有效的解决方案。

第二个代码导致与插值相关的错误

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

为什么会这样？因为您正在使用模板将部分

{{}}

设置为

v-on:click

指令，VueJS将其视为普通的aka vanilla JS，所以它无法接受此处的模板

{}

-mustaches

前面的答案为您提供了正确有效的解决方案。

绝对正确。查看文档中的示例2。查看文档中的示例2