Di materi sebelumnya, Anda telah belajar cara menampilkan / me-render data, selamat, tapi itu baru awal. Menampilkan data, apapun bentuknya (teks, gambar, audio, atau video), hanyalah bagian kecil dari keseluruhan aplikasi. Ketika user mulai menggunakan aplikasi yang kita buat, mereka pasti akan melakukan beragam interaksi seperti : hover / klik mouse, menekan tombol keyboard dan lain-lain. Untuk menangani interaksi dari user atau listening DOM (Document Object Model) events, kita membutuhkan Vue directive v-on.

Contoh Directive v-on:click

Pada materi ini, saya akan membuat sebuah aplikasi sederhana yang dapat menambahkan nama baru ke dalam daftar setelah komponen HTML button di-klik oleh user. Nama yang ditambahkan ke daftar diperoleh dari komponen HTML input. Kemudian, syarat agar nama bisa ditambahkan ke dalam daftar adalah komponen HTML input tidak boleh dalam keadaan kosong ketika button di-klik.

Sekarang, buat file latihan004.html lalu copy paste baris kode berikut :

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Latihan Vue 004</title>
</head>
<body>
    <div id="app">
        <ul>
            <li v-for="nama in daftarNama">{{ nama }}</li>
        </ul>
        <input type="text" v-model="namaBaru">
        <button v-on:click="tambahNama">Tambah Nama</button>
    </div>
    <script src="vue.js"></script>
    <script>
        new Vue ({    
            el: '#app',
            data: {
                namaBaru: '',
                daftarNama: ['Agus', 'Bambang', 'Ervan', 'Rian']
            },
            methods: {
                tambahNama() {
                    if (this.namaBaru.trim()) {
                        this.daftarNama.push(this.namaBaru);
                        this.namaBaru = '';
                    }
                }
            }
        });
    </script>
</body>
</html>

Setelah eksekusi file latihan004.html, hasilnya diperoleh seperti gambar di bawah ini :

event handling pada vue.js dengan directive v-on

Kode di atas adalah contoh penggunaan directive v-on untuk menangani (handling) setiap interaksi (event) yang dilakukan oleh user. Tahapan cara membaca kode tersebut :

  1. daftarNama: ['Agus', 'Bambang', 'Ervan', 'Rian']
    Ketika aplikasi pertama kali di-render, baris <li v-for="nama in daftarNama">{{ nama }}</li> akan memuat property daftarNama berbentuk array yang nilai default-nya adalah ‘Agus’, ‘Bambang’, ‘Ervan’, ‘Rian’.
  2. <input type="text" v-model="namaBaru">
    Nama yang ditambahkan ke array diperoleh dari komponen HTML input yang di-kaitkan (binding) ke property daftarNama melalui directive v-model="namaBaru". Apapun yang diketikkan pada komponen input di sisi HTML, akan secara otomatis merubah nilai property namaBaru di sisi Vue yang awalnya kosong namaBaru: '' – Baca artikel Prinsip Data Binding pada Vue.Js.
  3. <button v-on:click="tambahNama">Tambah Nama</button>
    Setiap kali button di-klik, Vue akan mencari fungsi / method bernama tambahNama(), kemudian memproses kode yang ada di dalamnya. Directive v-on pada baris v-on:click="tambahNama" juga dapat ditulis dengan @click="tambahNama".
  4. if (this.namaBaru) {}
    Sebelum method tambahNama() diproses, Vue akan mengecek apakah property namaBaru memiliki nilai (tidak dalam keadaan kosong). Fungsi Javascript trim() digunakan untuk membuang semua whitespace (spasi) di awal dan akhir string.
  5. this.daftarNama.push(this.namaBaru);
    this.namaBaru = '';
    Jika kondisi if (this.namaBaru) pada poin ke-4 terpenuhi, nilai dari property namaBaru akan ditambahkan / di-push() ke property daftarNama. Setelah push dilakukan, property namaBaru akan dikosongkan nilainya this.namaBaru = '';
  6. <li v-for="nama in daftarNama">{{ nama }}</li>
    Isi property daftarNama akan menjadi collection yang di-render oleh directive v-for. Selanjutnya, nilai dari alias nama akan ditampilkan melalui expression {{ nama }}. Baris kode ini akan terus diulang / di-render setiap kali namaBaru ditambahkan / di-push() ke array daftarNama – Baca artikel Menggunakan Directive v-for Pada Vue.js

Option methods:{} adalah tempat untuk mendeklarasikan setiap fungsi yang akan digunakan di dalam aplikasi Vue. Agar setiap fungsi dapat mengakses property di option data:{}, maka penulisan nama property harus diawali this, seperti : this.namBaru dan this.daftarNama.

Notasi Shorthand @ Pengganti v-on:

Directive v-on:click="namaMethod()" dapat ditulis dalam notasi ringkas / shorthand-nya yaitu : @click="namaMethod()". Selain @click, masih ada beberapa jenis directive v-on lainnya, seperti : v-on:keyup="namaMethod()" yang dapat ditulis dengan @keyup="namaMethod()" atau v-on:mouseover="namaMethod()" yang dapat ditulis dengan @mouseover="namaMethod()" dan lain-lain. Di materi selanjutnya Attribute, Class, Style Binding Pada Vue.js dengan v-bind, saya akan secara khusus membahas contoh penggunaan dari @mouseover.