Vue

Event Handling di Vue

Penjelasan

Vue menangani event lewat direktif v-on:event (atau singkatannya @event) yang diisi nama method atau ekspresi inline. Objek event bawaan browser bisa diakses lewat parameter khusus $event kalau dibutuhkan, atau otomatis diteruskan kalau method-nya dipanggil tanpa kurung.

Contoh Konsep

<script setup>
function handleKlik() {
    alert('Tombol diklik!');
}

function handleSubmit(event) {
    event.preventDefault(); // cegah reload halaman default
    console.log('Form disubmit');
}
</script>

<template>
    <form @submit="handleSubmit">
        <button type="button" @click="handleKlik">Klik Aku</button>
        <button type="submit">Kirim</button>
    </form>
</template>

Praktikum

Buat method handleKlik() yang mencetak "Tombol ditekan!" ke console lewat console.log(). Panggil method itu dari @click di sebuah tombol.

Editor Latihan

Ketik/edit bebas di sini untuk latihan — kode ini tidak dijalankan.

Tips

Vue punya event modifier praktis yang bisa langsung ditulis di template, mis. @click.prevent (otomatis preventDefault()) atau @submit.prevent — sering lebih ringkas dibanding memanggil event.preventDefault() manual di dalam method-nya.

← Kembali Computed Properties Lanjutkan → Conditional Rendering: v-if, v-else, v-show