Comment passer un paramètre au gestionnaire d'événement @click de Vue ?

Question

Je suis en train de créer un tableau en utilisant Vue.js et je veux définir un fichier de type onClick pour chaque ligne qui passe contactID . Voici le 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>   

En cliquant sur une ligne, il appelle addToCount() qui fonctionne. Je veux passer item.contactID a addToCount() . Quelqu'un peut-il suggérer la syntaxe correcte pour cela ?

Answer 1

Il suffit d'utiliser une expression Javascript normale, sans {} ou tout ce qui est nécessaire :

@click="addToCount(item.contactID)"

si vous avez également besoin de l'objet événement :

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

Answer 2

Lorsque vous utilisez des directives Vue, les expressions sont évaluées dans le contexte de Vue, et il n'est donc pas nécessaire d'envelopper les choses dans des directives de type {} .

@click est juste un raccourci pour v-on:click donc les mêmes règles s'appliquent.

Dans votre cas, il suffit d'utiliser @click="addToCount(item.contactID)"

Answer 3

J'ai eu le même problème et voici comment j'ai réussi à passer :

Dans votre cas, vous avez addToCount() qui est appelé. Maintenant, pour transmettre un paramètre lorsque l'utilisateur clique, vous pouvez dire @click="addToCount(item.contactID)"

dans l'implémentation de votre fonction vous pouvez recevoir les paramètres comme :

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!

}