Catatan Belajar Vue : Event & Method
Saat halaman di-load itu merupakan event, saat tombol diklik itu merupakan event, intinya interaksi antara HTML ( DOM ) dengan javascript itu biasa disebut Event. Penggunaan event di Vue itu cukup mudah, pada Vue bisa menggunakan directive v-on, lalu diikuti oleh eventyang akan digunakan. Bisa dilihat pada contoh script tulisan sebelumnya
<input type="text" v-on:input="cssClass = $event.target.value">
Pada contoh di atas saya menggunakan event input. Pada tulisan kali ini saya coba dulu yang paling sederhana yaitu klik. Pertama siapkan struktur html yang baru.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Event & Method</title>
<script src="https://vuejs.org/js/vue.min.js"></script>
</head>
<body>
<div id="app">
<button>
Klik
</button>
<br>
Jumlah : {{ countClick }}
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
countClick: 1
}
})
</script>
</html>
Rencananya setiap ngeklik tombol tersebut jumlah klik akan bertambah, caranya cukup mudah tambahkan directive v-on pada < button > sehingga hasilnya akan seperti berikut.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Event & Method</title>
<script src="https://vuejs.org/js/vue.min.js"></script>
</head>
<body>
<div id="app">
<button v-on:click="countClick = countClick + 1">
Klik
</button>
<br>
Jumlah : {{ countClick }}
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
countClick: 1
}
})
</script>
</html>
Hasilnya akan seperti ini
Silahkan kunjungi dokumentasi Vue untuk mengetahui sejumlah event yang bisa dikombinasikan dengan directive v-on.
Selanjutnya adalah method. Pada contoh di atas saya menggunakan hal yang sederhana, sekadar nambah 1 klik setiap kali event dilakukan, tapi jika nanti ternyata harus ada proses lainnya yang lebih njelimet tentu memaksakan langsung di dalam v-on bukanlah hal yang tepat, saat itulah method digunakan. Penggunaan method pada Vue berarti pada instance Vue perlu ditambahkan properti methods seperti ini.
<script>
new Vue({
el: '#app',
data: {
countClick: 1
},
methods: {
methodName() {
//masukan proses di sini
}
}
})
</script>
Anggap saja sekarang dengan fungsi yang barusan saya mau jika jumlah klik genap maka background berwarna biru dan ganjil berwarna merah.
!DOCTYPE html>
<html lang="en">
<head>
<title>Event & Method</title>
<script src="https://vuejs.org/js/vue.min.js"></script>
<style>
.red {
background-color: red;
}
.blue {
background-color: blue;
}
</style>
</head>
<body>
<div id="app">
<button v-on:click="changeBackground">
Klik
</button>
<br>
<div v-bind:class="cssClass" style="width:250px;">
Jumlah : {{ countClick }}
</div>
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
cssClass: "",
countClick: 0
},
methods: {
changeBackground() {
//masukan proses di sini
var count = this.countClick + 1;
this.countClick = count;
if(count % 2 == 0)
{
this.cssClass = "blue";
}else{
this.cssClass = "red";
}
}
}
})
</script>
</html>
Ada yang berbeda dari isi directive v-on, jika yang sebelumnya langsung menarget properti di dalam data, sekarang target di dalam v-on spesifik ke method.
Referensi :
https://www.tutorialspoint.com/javascript/javascript_events.htm
https://vuejs.org/v2/guide/events.html#Listening-to-Events
https://vuejs.org/v2/guide/events.html#Method-Event-Handlers