Belajar Tentang Event Key Up Pada Vue Js

Halo semuanya pada bagian artikel kali ini ada contoh event lainnya misalnya event onsubmit atau ada juga event onkeyup yang akan kita bahas kali ini. Sebagai contoh misalnya kita punya sebuah inputan textbox dan dibagian input text tersebut kita berikan v-on:keyup atau event ketika user mengetikkan sesuatu dikeyboard sebagai berikut

Belajar-Tentang-Event-Key-Up-Pada-Vue-Js-22-04-2017-1

Atau kita juga bisa spesifik memberikan angka 13 atau enter 

Belajar-Tentang-Event-Key-Up-Pada-Vue-Js-22-04-2017-2

Jadi pada masing-masing keyboard itu memiliki kode yang berbeda beda yang artinya 13 ini mewakili enter lalu saya akan panggil metode baru yaitu getName jadi konsepnya ketika saya melakukan enter maka kita akan jalankan metode getNamenya

Belajar-Tentang-Event-Key-Up-Pada-Vue-Js-22-04-2017-3

Tentu metode kita akan ada banyak dibagian object methodsnya maka dari itu kita pisahkan dengan koma untuk membuat metode baru

Belajar-Tentang-Event-Key-Up-Pada-Vue-Js-22-04-2017-4

Lalu aksi yang akan kita lakukan adalah kita cukup console log tulisan bahwa 'namanya vue js' dan bila kita jalankan lalu saya menuliskan sesuatu di bagian inputannnya maka tidak terjadi apa apa tapi kalo saya melakukan enter maka kita dapat pesan kecil dibagian console browsernya 

Belajar-Tentang-Event-Key-Up-Pada-Vue-Js-22-04-2017-5

Jadi dengan kata lain kita bisa mendeteksi event apa saja yang dilakukan oleh user. Tentu event tersebut yang sering kita gunakan atau yang sering kita lihat. Contoh hal lain yang sering terjadi misalnya kita punya sebuah link halaman sebagai tag <a>

Belajar-Tentang-Event-Key-Up-Pada-Vue-Js-22-04-2017-6

Yang saya berikan event click dan bila teman teman klik link tersebut metodenya sebenarnya dijalankan tapi akan langsung otomatis merefresh halamannya 
artinya metode kita seolah olahnya tidak dijalankan karena kita merender halaman baru dikarena tag <a> ini dia berusaha menuju halaman lain. Untuk itu kita bisa mencegah sifat aslinya agar tidak dijalankan. Nah untuk mencegah hal tersebut kita bisa menggunakan method prevent yang kita tulis atau kita sambungkan setelah nama eventnya seperti ini

Belajar-Tentang-Event-Key-Up-Pada-Vue-Js-22-04-2017-7

Tentu bila di klik sekarang kita akan panggil method yang sama yaitu getName yang sebelumnya kita buat. Tentu sekarang kita sudah lihat dibagian consolenya yaitu pesan dari metode getNamenya. Itu dia semoga jelas dan terima kasih

22 April 2017

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Kursus Postgre SQL Database Developer Terbaik 2024 di Jakarta
chat