Halo teman-teman semuanya, pada artikel sebelumnya kita sudah belajar tentang Reactive State di Vue, bagaimana menyimpan data menggunakan ref() dan reactive().
Pada artikel kali ini, kita akan membahas tentang Event Handling, yaitu cara menangani interaksi pengguna seperti klik tombol, input teks, hingga submit form di Vue.
Apa Itu Event Handling?
Event Handling adalah cara kita merespons aksi yang dilakukan pengguna pada elemen di halaman, misalnya:
- Klik tombol (
@click)
- Input teks (
@input)
- Submit form (
@submit)
- Hover (
@mouseover)
Di Vue, kita menggunakan directive v-on (atau shorthand @) untuk menangani event.
Event Click
Contoh sederhana: menambah angka ketika tombol diklik.
<script setup>
import { ref } from "vue"
const count = ref(0)
const increment = () => {
count.value++
}
</script>
<template>
<div>
<p>Count: {{ count }}</p>
<button @click="increment">Tambah</button>
</div>
</template>
Saat tombol diklik, fungsi increment dijalankan.
Event dengan Inline Expression
Kita juga bisa menuliskan ekspresi langsung di dalam event binding.
<script setup>
import { ref } from "vue"
const count = ref(0)
</script>
<template>
<button @click="count++">Klik +1</button>
<p>Count: {{ count }}</p>
</template>
Event Input
Menangkap perubahan dari input teks.
<script setup>
import { ref } from "vue"
const name = ref("")
</script>
<template>
<input @input="e => name.value = e.target.value" placeholder="Ketik nama..." />
<p>Halo, {{ name }}</p>
</template>
Saat kita mengetik di input, nilai name akan berubah sesuai teks.
Untuk kasus input, biasanya lebih mudah pakai v-model, yang akan kita bahas lebih detail di bab Form Binding.
Event Submit Form
Contoh menangani form dengan @submit.prevent.
<script setup>
import { ref } from "vue"
const email = ref("")
const handleSubmit = () => {
alert(`Form disubmit dengan email: ${email.value}`)
}
</script>
<template>
<form @submit.prevent="handleSubmit">
<input v-model="email" placeholder="Masukkan email" />
<button type="submit">Kirim</button>
</form>
</template>
Penjelasan:
@submit.prevent → mencegah reload default form.handleSubmit akan dipanggil saat form dikirim.
Event Modifier
Vue menyediakan event modifier untuk memudahkan penulisan event.
.prevent → mencegah aksi default..stop → menghentikan event bubbling..once → event hanya dijalankan sekali.
Contoh:
<template>
<!-- hanya dijalankan sekali -->
<button @click.once="alert('Klik hanya sekali')">Klik Saya</button>
</template>
Kesimpulan
Pada artikel ini, kita sudah belajar tentang Event Handling di Vue, mulai dari @click, @input, @submit, penggunaan inline expression, hingga event modifier. Dengan event handling, aplikasi kita bisa lebih interaktif dan merespons aksi pengguna.
Di artikel berikutnya, kita akan membahas tentang Conditional Rendering, yaitu bagaimana menampilkan atau menyembunyikan elemen dengan v-if, v-else, dan v-show.
Terima kasih