Übergeben eines Parameters an den Vue @ click-Ereignishandler

92

Ich erstelle eine Tabelle mit Vue.js und möchte onClickfür jede übergebene Zeile ein Ereignis definieren contactID. Hier ist der 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>

Beim Klicken auf eine Zeile wird aufgerufen addToCount(), was funktioniert. Ich möchte übergeben item.contactIDzu addToCount(). Könnte jemand die richtige Syntax dafür vorschlagen?

vue.js

— user761100
quelle

109

Wenn Sie Vue-Direktiven verwenden, werden die Ausdrücke im Kontext von Vue ausgewertet, sodass Sie keine Dinge einschließen müssen {}.

@clickist nur eine Abkürzung für v-on:clickDirektive, daher gelten die gleichen Regeln.

In Ihrem Fall einfach verwenden @click="addToCount(item.contactID)"

— Brian Glaz
quelle

1

Was ist, wenn das Argument, das ich übergeben möchte, nicht durchlaufen und eingegeben werden kann, sondern als solches fest codiert ist

<a href="#" @click="switchRoom" class="rooms">Interview Room</a>         <a href="#" @click="switchRoom" class="rooms">Green Room</a>         <a href="#" @click="switchRoom" class="rooms">Bavarian Caviar Room</a>         <a href="#" @click="switchRoom" class="rooms">Sky Room</a>

und ich den Textinhalt der a-Elemente in der switchRoom-Methode verwenden möchte?

— Akin Hwan

1

@AkinHwan Wenn es bereits fest codiert ist, senden Sie einfach den Text als Parameter@click="switchRoom('Sky Room')"

— Brian Glaz

129

Verwenden Sie einfach einen normalen Javascript-Ausdruck, kein {}oder nichts Notwendiges:

@click="addToCount(item.contactID)"

Wenn Sie auch das Ereignisobjekt benötigen:

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

— Linus Borg
quelle