如何在Vue js

Question

此代码：

<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这样的环境变量传递给事件方法呢？

Answer 1

<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指令将字符串计算为表达式。您无需插入额外的{{ }}。

Answer 2

添加到Leo的答案，如果您正在寻找获得v-for循环的索引而不是您必须执行的操作：

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

Answer 3

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

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

为什么会这样？因为你正在使用模板部分{{}}进入v-on:click指令，其中VueJS看起来像普通的名为vanilla JS，所以它不能接受这里的模板{{}} - 胡须。

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