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 + '!') } } })