Event Handling dengan v-on
Menangani event dengan @click, method vs inline handler, argumen & $event, modifier (.prevent, .stop, .once), dan modifier tombol keyboard.
Mendengarkan event
Directive v-on (singkatannya @) memasang event listener pada elemen. Event yang bisa didengar sama dengan event DOM biasa: click, input, submit, keyup, mouseover, dan seterusnya.
<button v-on:click="tambah">+</button>
<button @click="tambah">+</button> <!-- singkat, dipakai sehari-hari -->Dua jenis handler
| Jenis | Contoh | Kapan |
|---|---|---|
| Method handler | @click="tambah" | Logika lebih dari satu baris |
| Inline handler | @click="jumlah++" | Satu pernyataan singkat |
<button @click="jumlah++">+1</button>
<button @click="tambah(5)">+5</button> <!-- memanggil dengan argumen -->
function tambah(n) { jumlah.value += n }Perhatikan: @click="tambah" (tanpa kurung) memberi referensi fungsi; Vue memanggilnya saat event terjadi dan memberikan objek event sebagai argumen. @click="tambah(5)" adalah inline handler yang dijalankan saat klik.
Mengakses objek event
<input @input="ketik">
function ketik(event) {
console.log(event.target.value)
}
<!-- di inline handler gunakan $event -->
<button @click="kirim('halo', $event)">Kirim</button>Event modifier
Modifier adalah akhiran bertitik yang mengubah perilaku event tanpa kamu menulis event.preventDefault() manual.
| Modifier | Fungsi |
|---|---|
.prevent | event.preventDefault() — mis. mencegah form me-reload halaman |
.stop | event.stopPropagation() — hentikan event naik ke elemen induk |
.once | Handler hanya jalan sekali |
.self | Hanya jika target langsung elemen itu |
.capture | Tangkap di fase capture |
.passive | Optimasi scroll/touch |
<form @submit.prevent="kirim">...</form>
<a @click.stop="buka">...</a>
<button @click.once="sekali">Sekali saja</button>Modifier tombol keyboard
<input @keyup.enter="simpan">
<input @keyup.esc="batal">
<input @keydown.ctrl.s.prevent="simpan"> <!-- kombinasi -->Alias yang tersedia: .enter, .tab, .delete, .esc, .space, .up, .down, .left, .right; juga modifier sistem .ctrl, .alt, .shift, .meta.
Urutan modifier berpengaruh: @click.prevent.self mencegah default pada semua klik, sedangkan @click.self.prevent hanya pada klik langsung ke elemen itu.
Kesalahan umum
- Lupa
.preventpada form sehingga halaman ter-reload saat submit. - Menulis
onclick="..."bergaya HTML lama — di Vue pakai@click. - Menaruh logika berat langsung di atribut event. Pindahkan ke method agar mudah dibaca dan diuji.