Question

我正在使用Vue.js创建一个表，我想为每个传递contactID的行定义一个onClick事件。这是代码：

<tr v-for="item in items" class="static" 
    v-bind:class="{'evenRow': item.oddeven=='1', 'oddRow': item.oddeven=='0' }"
@click="addToCount('{item.contactID}')"
>
    <td>{{item.contactName}}</td>
    <td>{{item.recipient}}</td>
</tr>

点击一行时，它正在调用addToCount()，这是有效的。我想将item.contactID传递给addToCount()。有人可以为此建议正确的语法吗？谢谢

Answer 1

只需使用普通的Javascript表达式，不需要{}或任何必要的内容：

@click="addToCount(item.contactID)"

如果您还需要事件对象：

@click="addToCount(item.contactID, $event)"

Answer 2

当您使用Vue指令时，表达式将在Vue的上下文中进行评估，因此您无需在{}中包装内容。

@click只是v-on:click指令的简写，因此适用相同的规则。

在您的情况下，只需使用@click="addToCount(item.contactID)"

即可

Answer 3

我遇到了同样的问题，这是我设法通过的方法：

在您的情况下，您有addToCount()被调用。现在可以在用户点击时传递参数，您可以说@click="addToCount(item.contactID)"

在函数实现中，您可以收到如下参数：

addToCount(paramContactID){
 // the paramContactID contains the value you passed into the function when you called it
 // you can do what you want to do with the paramContactID in here!

}

如何将参数传递给Vue @click

3 个答案: