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

我正在使用 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()。有人能给出正确的语法吗？

160748 次浏览

小开

最佳答案

在使用 Vue 指令时，表达式在 Vue 上下文中计算，因此不需要在 {}中包装。

@click只是 v-on:click指令的简写，所以同样的规则也适用。

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

小开

只需使用一个普通的 Javascript 表达式，不需要 {}或任何必要的东西:

@click="addToCount(item.contactID)"

如果您还需要事件对象:

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

小开

我也遇到过同样的问题，以下是我如何设法通过的:

在你的例子中，你有 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!


}