~ We are changing the world with technology. ~

Matt Mullenweg

VueJS: Event Listener

VueJS: Event Listener

7007 Dilihat

Pada kesempatan kali ini kita akan membahas tentang event listener menggunakan VueJS. Event pada javascript akan membuat web kita menjadi lebih interaktif dimana akan melakukan suatu respon/aksi berdasarkan event yang telah ditentukan yang akan memicu jalannya script Javascript yang ada di dalam web tersebut. Namun sebelum melanjutkan materi ini, kita akan menyambung apa yang telah terputus pada materi sebelumnya: Mengenal Directive.

Sebelumnya kita telah membahas tentang directive v-show, v-if, dan v-for, maka pada project sederhana Daftar agenda akan kita terapkan satu persatu. Buka file 01-daftar-agenda.html lalu lakukan perubahan pada kedua potongan code berikut:

<!-- HTML -->
<div class="agenda" v-for="list in lists">
    <h3><i class="fa fa-bullhorn"></i> {{ list.agenda }}</h3>
    <p><i class="fa fa-calendar"></i> {{ list.jadwal }}</p>
    <p>{{ list.deskripsi }}</p>
    <hr>
</div>
​
<!-- Vue -->
<script type="text/javascript">
    new Vue({
        el: '#dw',
        data: {
            agenda: '',
            deskripsi: '',
            jadwal: '',
            lists: [
                {
                    agenda: 'Belajar VueJS',
                    jadwal: '11-24-2017',
                    deskripsi: 'materi event listener'
                },
                {
                    agenda: 'Belajar Laravel',
                    jadwal: '11-26-2017',
                    deskripsi: 'materi membuat API'
                }
            ]
        }
    }); 
</script>

Maka kita telah memiliki data default yang akan ditampilkan dengan menggunakan v-for.

Case selanjutnya adalah kita menginginkan form hanya akan tampil setelah tombol diklik dan secara otomatis tombol akan hilang saat form ditampilkan tanpa perlu mereload halaman. Lakukan perubahan pada potongan code berikut:

<!-- HTML -->
<button class="btn btn-danger btn-sm" v-on:click="bukaForm" v-if="hideTombol"><i class="fa fa-folder-open-o"></i> Lihat</button>
<div v-show="tampilForm">
    <div class="form-group">
        <label>Agenda</label>
        <input type="text" class="form-control" placeholder="Agenda apa hari ini ?" v-model="agenda">
    </div>
    <div class="form-group">
        <label>Deskripsi</label>
        <input type="text" class="form-control" v-model="deskripsi">
    </div>
    <div class="form-group">
        <label>Tanggal</label>
        <input type="date"  class="form-control" v-model="jadwal">
    </div>
    <hr>
</div>
​
<!-- Vue -->
<script type="text/javascript">
    new Vue({
        el: '#dw',
        data: {
            agenda: '',
            deskripsi: '',
            jadwal: '',
            lists: [
                {
                    agenda: 'Belajar VueJS',
                    jadwal: '11-24-2017',
                    deskripsi: 'materi event listener'
                },
                {
                    agenda: 'Belajar Laravel',
                    jadwal: '11-26-2017',
                    deskripsi: 'materi membuat API'
                }
            ],
            tampilForm: false,
            hideTombol: true
        },
        methods: {
            bukaForm() {
                this.tampilForm = true;
                this.hideTombol = false;
            }
        }
    }); 
</script>

Pada code diatas kita menggunakan v-show untuk menampilkan dan menyembunyikan form dan menggunakan v-if untuk hide/show tombol, sedangkan event yang digunakan adalah v-on:click, yakni VueJS akan bekerja saat tombol diklik.

Menggunakan Event

Sebenarnya kita telah menggunakan event listener pada case diatas, akan tetapi pada bagian ini kita akan membahas lebih jauh bagaimana sebuah event bekerja. Dalam Javascript terdapat banyak event yang dapat digunakan sesuai dengan kondisi dan kebutuhan.

Dengan VueJS, ketika kita akan bekerja dengan event maka dapat menggunakan directive v-on lalu diikuti dengan jenis event yang akan digunakan, misal: v-on:click, v-on:submit, v-on:keyup, dll. Sedangkan untuk penggunaannya pun cukup mudah, cukup tambahkan directive tersebut kedalam elemen yang akan menggunakannya lalu diikuti dengan nama function atau method yang akan dilakukan ketika event tersebut terjadi.

<button class="btn btn-danger" v-on:click="bukaForm">Klik</button>

Lalu pada script VueJS kita dapat membuat function tersebut dengan menambahkan properti methods.

<script type="text/javascript">
    new Vue({
        el: '#dw',
        methods: {
            bukaForm() {
                alert('Saya diklik');
            }
        }
    }); 
</script>

Jika digabungkan kode lengkapnya akan tampak seperti ini:

<!DOCTYPE html>
<html>
<head>
    <title>Event Listener - Daengweb</title>
</head>
<body>
    <div id="dw">
        <button class="btn btn-danger" v-on:click="bukaForm">Klik</button>
    </div>
​
    <script type="text/javascript" src="https://unpkg.com/[email protected]/dist/vue.js"></script>
    <script type="text/javascript">
        new Vue({
            el: '#dw',
            methods: {
                bukaForm() {
                    alert('Saya diklik');
                }
            }
        }); 
    </script>
</body>
</html>

Dan hasil yang akan diperoleh saat tombol diklik akan terlihat seperti berikut

Mudah bukan? cara kerjanya cukup sederhana. Selain itu anda bisa mencoba dengan event lainnya seperti v-on:keyup untuk memperdalam pengetahuan anda dalam bekerja menggunakan event.

Contoh Kasus

Melanjutkan project sederhana Daftar agenda, pada contoh kali ini kita akan menambahkan fitur yakni saat tombol tambah diklik maka data pada list agenda akan otomatis bertambah dan form menjadi kosong.

<!DOCTYPE html>
<html>
<head>
    <title>Daftar Agenda - Daengweb</title>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
​
    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
​
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
    <div class="container" style="padding-top: 20px">
        <div class="row" id="dw">
            <div class="col-md-6">
                <div class="panel panel-danger">
                    <div class="panel-heading">
                        <h3 class="panel-title">Daftar Agenda</h3>
                    </div>
                    <div class="panel-body">
                        <button class="btn btn-danger btn-sm" v-on:click="bukaForm" v-if="hideTombol"><i class="fa fa-folder-open-o"></i> Lihat</button>
                        <div v-show="tampilForm">
                            <div class="form-group">
                                <label>Agenda</label>
                                <input type="text" class="form-control" placeholder="Agenda apa hari ini ?" v-model="agenda">
                            </div>
                            <div class="form-group">
                                <label>Deskripsi</label>
                                <input type="text" class="form-control" v-model="deskripsi">
                            </div>
                            <div class="form-group">
                                <label>Tanggal</label>
                                <input type="date"  class="form-control" v-model="jadwal">
                            </div>
                            <div class="form-group">
                                <button class="btn btn-primary btn-md" v-on:click="tambahData"><i class="fa fa-plus-circle"></i> Tambah</button>
                            </div>
                            <hr>
                        </div>
​
                        <div class="agenda" v-for="list in lists">
                            <h3><i class="fa fa-bullhorn"></i> {{ list.agenda }}</h3>
                            <p><i class="fa fa-calendar"></i> {{ list.jadwal }}</p>
                            <p>{{ list.deskripsi }}</p>
                            <hr>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
​
    <script type="text/javascript" src="https://unpkg.com/[email protected]/dist/vue.js"></script>
    <script type="text/javascript">
        new Vue({
            el: '#dw',
            data: {
                agenda: '',
                deskripsi: '',
                jadwal: '',
                lists: [
                    {
                        agenda: 'Belajar VueJS',
                        jadwal: '11-24-2017',
                        deskripsi: 'materi event listener'
                    },
                    {
                        agenda: 'Belajar Laravel',
                        jadwal: '11-26-2017',
                        deskripsi: 'materi membuat API'
                    }
                ],
                tampilForm: false,
                hideTombol: true
            },
            methods: {
                bukaForm() {
                    this.tampilForm = true;
                    this.hideTombol = false;
                },
                tambahData() {
                    this.lists.push({
                        agenda: this.agenda,
                        jadwal: this.jadwal,
                        deskripsi: this.deskripsi
                    });
                    this.agenda = '',
                    this.jadwal = '',
                    this.deskripsi = ''
                }
            }
        }); 
    </script>
</body>
</html>

Apabila semuanya berjalan lancar dan benar maka anda akan mendapatkan seperti berikut

Mudah bukan? Siapa bilang belajar pemrograman itu sulit. So keep learning & don't ever give up. Sampai jumpa pada seri selanjutnya, dan semoga bermanfaat.

Full Stack Developer & Remote Worker salah satu perusahaan asal Australia. Senang dengan teknologi baru. Laravel addict yang tidak fanatik. Merekam jejak dengan menulis

6 Cara Mendefinisikan Component di Vue.js VueJS

6 Cara Mendefinisikan Component di Vue.j...

Component menjadi salah satu bagian yang sangat berguna untuk mengelompokkan sebuah fungsi agar bisa digunakan berulang kali. Pengelompokkan fungsi ini berguna untuk mempercepat proses development dan...

Sistem Ongkos Kirim RuangAPI Menggunakan Vue.js VueJS

Sistem Ongkos Kirim RuangAPI Menggunakan...

Membuat simulasi untuk menampilkan ongkos kirim pada sebuah aplikasi yang membutuhkan informasi terkait data pengiriman berdasarkan berat dan tujuan pengiriman hingga pada tingkatan kecamatan. Berikut...

Membuat Datatable Dengan Vue.js & Laravel 6 Laravel VueJS

Membuat Datatable Dengan Vue.js & Larave...

Tak bisa dipungkiri, Datatable telah menarik banyak perhatian sekaligus pengguna karena ragam fitur yang ditawarkannya serta kemudahan dalam mengintegrasikan dengan aplikasi yang sedang kita develop....

Komentar