HTML event adalah sesuatu yang terjadi pada sebuah DOM element. Ketika Vue.js digunakan pada HTML elemen, Vue.js bisa melakukan suatu aksi ketika terjadi sebuah event pada elemen ini. Proses inilah yang kita sebut dengan Event Handling pada Vue.js
Event pada elemen HTML mewakili segala sesuatu dari interaksi pengguna, misalnya:
- Sebuah halaman selesai di load
- Sebuah button di klik
- Sebuah form disubmit
- dll
Inti dari Event Handling adalah kita dapat melakukan sesuatu pada saat sebuah event terjadi. Pada Vue.js untuk me-listen event DOM kita dapat menggunakan directive v-on dengan format v-on:event. Misalnya kita akan melakukan sesuatu saat event click terjadi pada sebuah button, pada elemen input tersebut kita bisa menggunakan v-on:click.
Sekarang mari kita mencoba membuat sebuah contoh sederhana untuk mendemonstrasikan penanganan event pada Vue.js. Misalnya, kita memiliki sebuah button dan pada saat button tersebut di klik, kita harus menghitung berapa jumlah klik yang sudah terjadi pada button tersebut.
Handling Event Inline
Cara pertama, kita bisa menangani event secara inline dengan menambahkan counter pada suatu variable Vue.js ketika button di klik.
<html>
<head>
<title>Vue.js Event Handling</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
</head>
<body>
<div id="app">
<div class="container mt-5">
<button class="btn btn-primary" v-on:click="upvotes++">
Upvote! {{upvotes}}
</button>
</div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
upvotes: 0
}
})
</script>
</html>Bila kita lihat pada contoh kode diatas, kita memiliki sebuah variable dengan nama upvotes, kemudian kita melakukan sebuah aksi pada saat event di klik dengan menggunakan directive v-on:click. Pada saat button di klik kita akan menambahkan jumlah klik pada variable upvotes (upvotes++)
Handling Event menggunakan Method
Kita juga bisa menggunakan sebuah method untuk melakukan sesuatu pada saat terjadi event, pada contoh ini kita akan melakukan hal yang sama pada contoh diatas, tetapi menggunakan method.
<html>
<head>
<title>Vue.js Event Handling</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
</head>
<body>
<div id="app">
<div class="container mt-5">
<button class="btn btn-primary" v-on:click="upvote">
Upvote! {{upvotes}}
</button>
</div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
upvotes: 0
},
methods: {
upvote: function () {
this.upvotes++;
}
}
})
</script>
</html>Pada kode diatas, kita akan memanggil method upvote pada saat button di klik, hasilnya akan sama persis dengan contoh sebelumnya. Hanya saja, menurut saya menggunakan method untuk handling event kode kita terlihat lebih rapih.
Shorcut v-on
Vue.js juga menyediakan sebuah shortcut untuk mempersingkat penggunaan v-on untuk event handling. Kita bisa menggunakan symbol @ untuk handling event, pada dasarnya symbol @ ini hanya menggantikan directive v-on, tidak ada fungsi khusus pada symbol ini.
<button v-on:click="upvote">
Upvote! {{upvotes}}
</button><button @click="upvote">
Upvote! {{upvotes}}
</button>Masih banyak event lainnya yang bisa kita gunakan seperti onchange, onmouseover, onsubmit, dll. Berikut ini adalah referensi daftar event yang biasanya digunakan pada sebuah aplikasi.
Pada tutorial kali ini kita hanya menggunakan event click untuk mendemonstrasikan bagaimana Event Handling pada Vue.js. Kita tidak akan membahas semua event yang ada pada tutorial kali ini, akan tetapi pada dasarnya penanganan event pada setiap event pada HTML menggunakan cara yang sama.
No Comments
Leave a comment Cancel