Mengelola Event di Vue.js: Cara Efektif Menggunakan v-on dan Modifier

Salah satu bagian terpenting dari aplikasi web interaktif adalah kemampuannya untuk merespons aksi pengguna. Mulai dari klik tombol, input teks, hingga submit formulir — semuanya melibatkan event. Di Vue.js, pengelolaan event menjadi sangat intuitif berkat directive v-on, yang sering disingkat menjadi @.

Vue tidak hanya memudahkan kita dalam menangani event DOM seperti click, input, atau submit, tapi juga memberikan modifier yang sangat berguna. Modifier ini memungkinkan kita untuk mengatur perilaku default dari event, menghentikan propagasi, atau bahkan hanya merespons pada kombinasi tombol tertentu, seperti @keyup.enter.

Dalam artikel ini, kita akan membahas cara kerja v-on, penggunaannya dalam berbagai konteks, serta modifier-modifier yang umum dan sangat membantu dalam kasus dunia nyata.

Dasar Penggunaan v-on

Directive v-on digunakan untuk mengikat event handler ke elemen DOM dalam template Vue. Kita bisa menuliskannya secara eksplisit (v-on:click) atau dalam bentuk singkatan (@click), yang lebih ringkas dan umum digunakan.

Contoh Dasar: Menangani Klik Tombol

<template>
  <div>
    <button @click="tambah">Tambah</button>
    <p>Jumlah: {{ count }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const count = ref(0);

function tambah() {
  count.value++;
}
</script>

Penjelasan

@click="tambah" berarti saat tombol diklik, fungsi tambah() akan dijalankan.
count adalah reactive state yang akan meningkat setiap kali tombol diklik.
Tanpa perlu menulis event listener manual, kita cukup tulis event langsung di template.

Event dengan Parameter dan $event

Terkadang kita ingin memberikan parameter khusus ke fungsi event handler. Vue menyediakan cara mudah untuk melakukannya dengan sintaks inline dan $event.

Contoh: Kirim Data dan Event

<template>
  <button @click="handleClick('produkA', $event)">Beli Produk A</button>
</template>

<script setup>
function handleClick(namaProduk, event) {
  alert(`Kamu membeli: ${namaProduk}`);
  console.log('Detail event:', event);
}
</script>

Penjelasan

Parameter pertama adalah nama produk yang kita kirimkan manual.
$event adalah objek event asli dari DOM, bisa digunakan jika kita ingin tahu detail seperti tombol mouse, posisi klik, dll.

Modifier pada v-on

Vue menyediakan modifier event untuk menghindari boilerplate code seperti event.preventDefault() atau event.stopPropagation(). Modifier ini bisa ditambahkan langsung setelah nama event.

1. .prevent

Digunakan untuk mencegah aksi default dari suatu elemen, seperti form yang melakukan submit dan reload halaman.

<form @submit.prevent="submitForm">
  <input v-model="nama" />
  <button type="submit">Submit</button>
</form>

Tanpa .prevent, browser akan reload setelah tombol submit diklik.

2. .stop

Digunakan untuk menghentikan propagasi event ke elemen induk. Ini berguna jika elemen child dan parent sama-sama menangani event yang sama.

<div @click="parentClick">
  <button @click.stop="childClick">Klik Saya</button>
</div>

<script setup>
function parentClick() {
  alert('Parent diklik');
}
function childClick() {
  alert('Child diklik');
}
</script>

Jika .stop dihapus, klik pada tombol akan memicu dua alert karena event naik ke parent.

3. .once

Event handler hanya dipanggil sekali saja, meskipun event terjadi berkali-kali.

<button @click.once="halo">Klik Sekali</button>

<script setup>
function halo() {
  alert('Ini hanya muncul sekali!');
}
</script>

4. .enter, .tab, .esc, dll

Vue menyediakan modifier untuk keyboard event tertentu, seperti saat menekan Enter atau Escape. Ini sangat membantu saat membuat input atau form.

<input @keyup.enter="submit" placeholder="Tekan Enter untuk kirim" />

<script setup>
function submit() {
  alert('Data dikirim!');
}
</script>

Contoh Kasus Dunia Nyata: To-Do List Sederhana

Mari kita buat aplikasi kecil yang memanfaatkan beberapa fitur event sekaligus:

Input teks untuk menambahkan item
Tekan Enter untuk submit
Klik untuk hapus item
Gunakan .prevent, .enter, .stop

<template>
  <div>
    <form @submit.prevent="tambahTodo">
      <input
        v-model="inputTodo"
        @keyup.enter="tambahTodo"
        placeholder="Tambahkan tugas..."
      />
    </form>

    <ul>
      <li
        v-for="(item, index) in todos"
        :key="index"
        @click="hapusTodo(index)"
      >
        {{ item }}
      </li>
    </ul>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const inputTodo = ref('');
const todos = ref([]);

function tambahTodo() {
  if (inputTodo.value.trim()) {
    todos.value.push(inputTodo.value.trim());
    inputTodo.value = '';
  }
}

function hapusTodo(index) {
  todos.value.splice(index, 1);
}
</script>

Penjelasan

Submit bisa dilakukan dengan Enter atau klik tombol (jika ditambahkan).
List item bisa dihapus dengan klik — kombinasi data binding dan event.
.prevent mencegah reload form.
.enter mempermudah input via keyboard.

Tips dan Best Practice

Gunakan .prevent daripada event.preventDefault() untuk form dan link.
Hindari inline logic yang kompleks di dalam template (@click="x + y > z ? doA() : doB()") — buat fungsi di script.
Gunakan .stop saat kamu yakin ingin mencegah bubbling event, tapi jangan terlalu sering — bisa menyebabkan perilaku yang sulit dilacak.

Vue.js menawarkan pendekatan deklaratif dan ringkas untuk menangani event di DOM. Dengan menggunakan v-on atau @, kamu bisa:

Menangani event pengguna seperti klik, input, dan submit.
Menambahkan modifier untuk mengontrol perilaku default atau spesifik keyboard.
Membuat interaksi yang bersih dan mudah dibaca.

Pemahaman yang baik tentang cara kerja event dan modifier di Vue akan membantu kamu membangun aplikasi yang lebih interaktif dan elegan tanpa banyak kode tambahan.

Categories:Vue Js