如何将参数传递给 Vue @click 事件处理程序

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() 。有人可以为此建议正确的语法吗？

原文由 user761100 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

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

原文由 Brian Glaz 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

 @click="addToCount(item.contactID)"

如果您还需要事件对象：

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

原文由 Linus Borg 发布，翻译遵循 CC BY-SA 3.0 许可协议