如何将参数传递给Vue @click事件处理程序 [英] How to pass a parameter to Vue @click event handler

问题描述

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

I am creating a table using Vue.js and I want to define an onClick event for each row that passes contactID. Here is the code:

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

On clicking a row, it is calling addToCount(), which is working. I want to pass item.contactID to addToCount(). Could someone suggest the correct syntax for this?

推荐答案

在使用Vue指令时，表达式是在Vue上下文中求值的，因此您无需将内容包装在 {} .

When you are using Vue directives, the expressions are evaluated in the context of Vue, so you don't need to wrap things in {}.

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

@click is just shorthand for v-on:click directive so the same rules apply.

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

In your case, simply use @click="addToCount(item.contactID)"

这篇关于如何将参数传递给Vue @click事件处理程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！