Event Handling adalah suatu penanganan action yang terjadi.
Listening to Events
Kamu dapat menggunakan v-on merupakan directive yang berperan sebagai sebuah event listener.
Contohnya :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Handling Event</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="app">
<button v-on:click="counter += 1">Tambah 1</button>
<p>Button yang di klik {{ counter }}.</p>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
counter: 0
}
})
</script>
</html>
Method Event Handlers
Method event handlers berfungsi untuk menangani event yang lebih komplek. Jadi di dalam v-on kita simpan method yang akan di jalankan.
Contohnya :
<div id="app">
<input type="text" v-model="name" placeholder="Tuliskan disini">
<button v-on:click="greet">Ucapkan Salam</button>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
name: ''
},
methods: {
greet: function (event) {
alert('Hello ' + this.name + '!')
if (event) {
alert(event.target.tagName)
}
}
}
})
</script>
Methods in Inline Handlers
Jika dalam Metode event handlers kita hanya mengisi nama method di dalam v-on:click=”nama_method”, sedangkan di methods in inline handlers kita bisa langsung ke mengisi isi method nya juga seperti ini v-on:click=”nama_method(v-model name)”.
<div id="app">
<input type="text" v-model="name" placeholder="Tuliskan disini">
<button v-on:click="greet(name)">Ucapkan Salam</button>
</div>
var vm = new Vue({
el: '#app',
methods: {
greet: function (name) {
alert('Hello ' + name + '!')
}
}
})