Event Handling di Vue

Kali ini kita akan mempelajari tentang event handling di Vue JS. Sebelumnya kita juga pernah menyinggung tentang event handling pada materi directive. Pada materi tersebut kita belajar menggunakan directive v-on atau menggunakan shortcut dengan @ untuk melakukan event handling. Sebenarnya ada banyak event yang bisa kita gunakan di Vue. Sekarang kita akan coba beberapa contoh event handling yang ada pada vue.

Penggunaan @click

Pertama kita akan coba menggunakan @click untuk menyimpan data dari input ke state. Perhatikan contoh berikut ini:

<script setup lang="ts">
import {ref} from "vue";

const firstName = ref("");
const lastName =ref("");

function save() {
  const firstNameInput = document.getElementById("firstName") as HTMLInputElement;
  firstName.value = firstNameInput.value;

  const lastNameInput = document.getElementById("lastName") as HTMLInputElement;
  lastName.value = lastNameInput.value;
}
</script>

<template>
  firstName: {{firstName}}<br>
  lastName: {{lastName}}<br>

  <input placeholder="First Name" type="text" id="firstName"/><br>
  <input placeholder="Last Name" type="text" id="lastName"/><br>
  <button @click="save">Save</button>
</template>

<style scoped>

</style>

Tampilan dari kode di atas adalah sebagai berikut:

Pada contoh di atas, ketika kita klik save, maka function save dijalankan. Function tersebut akan menyimpan firstName dan lastName pada input ke state firstName dan lastName.

Selain menggunakan button, kita juga bisa secara langsung menyimpan value dari input ke state menggunakan event @input. Dengan penggunaan event ini, kita tidak perlu klik tombol save untuk mengubah state. Tapi state akan secara otomatis berubah ketika mengubah inputnya. Untuk melakukannya cukup sederhana, kita hanya perlu menggunakan @input=”save” pada element input. Untuk lebih jelasnya, perhatikan contoh berikut ini.

<input placeholder="First Name" type="text" id="firstName" @input="save"/><br>
<input placeholder="Last Name" type="text" id="lastName" @input="save"/><br>

Penggunaan Parameter Event Handling di Vue

Jika penulisan function dirasa cukup panjang, kita bisa menyederhanakan function pada contoh sebelumnya dengan cara menambahkan parameter event. Dengan parameter tersebut kita tidak perlu lagi harus memanggil input menggunakan getElementById, kita bisa memanggil input secara langsung melalui event.target. Untuk lebih jelasnya, perhatikan contoh berikut ini.

<script setup lang="ts">
import {ref} from "vue";

const firstName = ref("");
const lastName =ref("");

function changeFirstName(event: any) {
  firstName.value = event.target.value;
}

function changeLastName(event: any) {
  lastName.value = event.target.value;
}
</script>

<template>
  firstName: {{firstName}}<br>
  lastName: {{lastName}}<br>

  <input placeholder="First Name" type="text" id="firstName" @input="changeFirstName"/><br>
  <input placeholder="Last Name" type="text" id="lastName" @input="changeLastName"/><br>
</template>

<style scoped>

</style>

Dengan contoh di atas, kita buat 2 function yaitu changeFirstName dan changeLastName yang masing-masing memiliki parameter event. Parameter tersebut tidak perlu kita masukkan ya. Parameter tersebut akan secara otomatis di set ketika kita memanggilnya. Dengan parameter event tersebut vue dapat melakukan identifikasi siapa yang melakukan pemanggilan.

Event Handling di Vue Melakukan Perhitungan

Kelebihan lain dari event handling di vue JS adalah dia bisa melakukan eksekusi perintah. Untuk lebih jelasnya, perhatikan contoh berikut ini.

<script setup lang="ts">
import {ref} from "vue";
const counter = ref(1);
</script>

<template>
  <button @click="counter = counter * 2">{{ counter }}</button>
</template>

<style scoped>

</style>

Dengan potongan kode di atas, vue akan menghasilkan aplikasi seperti berikut ini.

Penutup

Sebenarnya dukungan event handling di vue sangatlah banyak. Untuk lebih lengkapnya teman-teman dapat melihat di dokumentasi vue di link berikut ini. Aku tidak sanggup kalau harus menjelaskan satu per satu event handling yang ada karena memang sangat banyak.

Jadi demikianlah yang bisa aku sampaikan. Vue series ini masih belum selesai ya, masih ada beberapa materi lagi terkait dengan vue. Jadi nantikan kelanjutnya. 😉