Cara meneruskan parameter ke event handler Vue @click

95

Saya membuat tabel menggunakan Vue.js dan saya ingin menentukan onClickacara untuk setiap baris yang lewat contactID. Ini kodenya:

<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>   

Saat mengklik baris, itu memanggil addToCount(), yang berfungsi. Saya ingin lulus item.contactIDke addToCount(). Bisakah seseorang menyarankan sintaks yang benar untuk ini?

pengguna761100
sumber

Jawaban:

116

Saat Anda menggunakan direktif Vue, ekspresi dievaluasi dalam konteks Vue, jadi Anda tidak perlu membungkusnya {}.

@clickhanyalah singkatan dari v-on:clickdirektif sehingga aturan yang sama berlaku.

Dalam kasus Anda, cukup gunakan @click="addToCount(item.contactID)"

Brian Glaz
sumber
1
Bagaimana jika argumen yang ingin saya sampaikan tidak diiterasi dan dapat dikodekan tetapi dikodekan dengan keras seperti itu <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> dan saya ingin menggunakan konten teks dari elemen a dalam metode switchRoom?
Akin Hwan
1
@AkinHwan Jika sudah sulit dikodekan, cukup kirim teks sebagai parameter@click="switchRoom('Sky Room')"
Brian Glaz
136

Cukup gunakan ekspresi Javascript normal, tidak ada {}atau apa pun yang diperlukan:

@click="addToCount(item.contactID)"

jika Anda juga membutuhkan objek acara:

@click="addToCount(item.contactID, $event)"
Linus Borg
sumber
0

Saya memiliki masalah yang sama dan inilah cara saya melewatinya:

Dalam kasus Anda, Anda memiliki addToCount()yang disebut. sekarang untuk memberikan parameter saat pengguna mengklik, Anda dapat mengatakannya@click="addToCount(item.contactID)"

dalam implementasi fungsi Anda, Anda dapat menerima parameter seperti:

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!

}
Fotie M. Constant
sumber
Terima kasih. Jawaban Anda serupa dengan yang telah disediakan oleh @Linus
pengguna761100