Event handling artinya memberi tahu Vue apa yang harus dijalankan saat pengguna melakukan sesuatu: mengklik, mengetik, menekan tombol keyboard, atau mengirim form. Bayangin bel di meja Warung Bu Sri. Belnya sendiri gak melakukan apa-apa. Bu Sri yang punya aturan: "kalau bel bunyi, aku datang ke kasir". Di Vue, aturan itu ditulis @click="tambah": kalau ada klik, jalankan tambah.
🧪 Tebakan cepat: Script berisi
function tambah(nama) { pesanan.value.push(nama) }, dan tombolnya ditulis<button @click="tambah">Tambah</button>, tanpa kurung. Sesudah satu klik, apa yang tampil di "Pesanan:"? Tebak dulu, jawabannya ada di bagian "Dengan atau tanpa kurung".
@click: jalankan kode saat diklik
const jumlah = ref(0)
function tambah() {
jumlah.value++
}
---template---
<p>Es Teh × {{ jumlah }}</p>
<button @click="tambah">Tambah</button>
<button @click="jumlah = 0">Batal</button>
| Kejadian | jumlah |
Layar |
|---|---|---|
| Halaman tampil | 0 | Es Teh × 0 |
| Klik Tambah | 1 | Es Teh × 1 |
| Klik Tambah | 2 | Es Teh × 2 |
| Klik Batal | 0 | Es Teh × 0 |
v-on:click="tambah"adalah bentuk lengkapnya,@click="tambah"singkatannya. Artinya sama persis.- Isinya boleh nama fungsi dari script (
tambah), boleh juga satu perintah pendek langsung di template (jumlah = 0). Di template, ref dibaca tanpa.value. - Latihan pertama memakai bentuk pendek:
<button id="inc" @click="count++">+1</button>.countmulai dari 0, sekali klik jadi 1, dua kali jadi 2. - Latihan kedua memakai fungsi terpisah:
const sapa = () => { pesan.value = "Halo!" }di script, lalu@click="sapa". Di script,.valuewajib. - Event lain ditulis sama:
@input,@keyup,@submit,@mouseenter. Nama sesudah@adalah nama event DOM-nya.
Dengan atau tanpa kurung
const pesanan = ref([])
function tambah(nama) {
pesanan.value.push(nama)
}
---template---
<button @click="tambah('Es Teh')">Tambah Es Teh</button>
<button @click="tambah">Tanpa kurung</button>
<p>Pesanan: {{ pesanan.join(", ") }}</p>
| Ditulis | nama yang diterima tambah |
"Pesanan:" sesudah 1 klik |
|---|---|---|
@click="tambah('Es Teh')" |
"Es Teh" |
Es Teh |
@click="tambah" |
objek event klik | [object PointerEvent] di Chrome |
@click="tambah()" |
undefined |
kosong |
Tanpa kurung, yang tampil [object PointerEvent], bukan nama menu. Itu jawaban tebakannya.
- Tanpa kurung, Vue sendiri yang memanggil fungsinya dan memberinya objek event: object berisi keterangan kejadiannya, misalnya elemen yang diklik. Cocok untuk fungsi tanpa parameter seperti
sapa. - Dengan kurung, kamu yang memanggil, jadi kamu yang menentukan argumennya. Di dalam
v-for, tulis@click="tambah(m.nama)". - Butuh argumen dan objek event? Di template, objek event tersedia sebagai
$event:@click="tambah(m.nama, $event)", atau@input="pemesan = $event.target.value"untuk membaca isi input.
Modifier: .prevent, .stop, .once, dan tombol keyboard
const log = ref([])
---template---
<div @click="log.push('kartu Es Teh dibuka')">
Es Teh
<button @click.stop="log.push('tambah Es Teh')">Tambah</button>
</div>
<input @keyup.enter="log.push('cari menu')" placeholder="Cari menu" />
<form @submit.prevent="log.push('pesanan dikirim')">
<button>Kirim pesanan</button>
</form>
<p>{{ log.join(" | ") }}</p>
Modifier ditulis dengan titik sesudah nama event, dan menggantikan satu baris kode yang biasa kamu tulis sendiri:
| Modifier | Sama dengan | Contoh |
|---|---|---|
.prevent |
event.preventDefault() |
@submit.prevent: kirim form tanpa memuat ulang halaman |
.stop |
event.stopPropagation() |
@click.stop: klik tombol gak ikut sampai ke kartu di luarnya |
.once |
handler cuma jalan sekali | @click.once: diklik tiga kali, tetap jalan sekali |
.enter, .esc |
cuma saat tombol itu ditekan | @keyup.enter="cari" |
.preventmencegah aksi bawaan browser. Tanpa itu, mengirim form membuat browser memuat ulang halaman, dan semua data di layar kembali ke awal. Dengan@submit.prevent, cuma fungsimu yang jalan.@click.preventdi sebuah link mencegah pindah halaman..stopmenghentikan event merambat. Klik di tombol juga dianggap klik di elemen induknya. Tanpa.stop, klik Tambah mencatattambah Es Tehlalukartu Es Teh dibuka. Dengan.stop, cumatambah Es Teh.- Modifier boleh dirangkai:
@click.stop.prevent. - Playground gak mengizinkan form dikirim, jadi menekan Enter atau tombol submit di sana gak memicu
@submitsama sekali. Coba form di proyek sungguhan, atau pakai@clicksaat bereksperimen di Playground.
⚠️ Jebakan yang sering ketemu
- Kurung yang hilang.
@click="tambah"untuk fungsi berparameter memberinya objek event, jadi yang masuk[object PointerEvent]. Tulis@click="tambah(m.nama)". onclickHTML biasa.<button onclick="count++">dibiarkan Vue sebagai atribut biasa. Browser menjalankannya di luar komponen, tempatcountgak ada, dan console menulisReferenceError: count is not defined. Latihan memeriksa@click.- Lupa
.valuedi fungsi script.pesan = "Halo!"padaconst pesan = ref("...")berhenti denganTypeError: Assignment to constant variable.Di script tulispesan.value = "Halo!". - Form tanpa
.prevent. Halamannya dimuat ulang dan isian pengguna hilang. Tulis@submit.prevent.
TL;DR: @click="tambah" (singkatan v-on:click) menjalankan tambah saat elemen diklik; isinya boleh nama fungsi atau perintah pendek seperti count++. Tanpa kurung, Vue memberi fungsinya objek event; dengan kurung, kamu yang menentukan argumennya, dan $event memberi objek event di template. Modifier menggantikan kode kecil: .prevent memanggil preventDefault() dan mencegah aksi bawaan seperti form memuat ulang halaman, .stop menghentikan event merambat ke induknya, .once cuma jalan sekali, .enter cuma saat Enter. Jangan pakai onclick HTML biasa, dan di script ubah ref lewat .value.
