~ We are changing the world with technology. ~

Matt Mullenweg

VueJS: Component #2

VueJS: Component #2

3751 Dilihat

Sebelumnya kita belajar tentang bagaimana membuat sebuah component sampai pada tingkatan passing data kedalam component, maka pada kesempatan kali ini kita akan mencoba berbagai case untuk menambah pemahaman kita seputar component. Mengingatkan kembali bahwa dengan component kita dapat membuat sebuah template yang sifatnya reusable.

Directive v-model & Component

Pada case kali ini kita akan membuat sebuah component yang berfungsi untuk menampilkan data secara dinamis berdasarkan apa yang di input pada form yang disediakan, sehingga apabila tombol diklik maka secara otomatis component yang digunakan akan melakukan looping. Ohya sebelum memulai, kita menggunakan bootstrap sebagai layout. Langkah pertama buat component terlebih dahulu:

<!-- component -->
<template id="panel">
    <div class="panel panel-primary">
        <div class="panel-heading">
            {{ listdata.judul }}
        </div>
        <div class="panel-body">
            {{ listdata.konten }}
        </div>
    </div>
</template>
​
<!-- vue.component -->
Vue.component('panel', {
    props: ['listdata'],
    template: '#panel'
});

Pada code diatas kita telah memiliki custom component dengan tampilan panel bootstrap, dimana nantinya akan mem-passing data kedalam component dengan menggunakan props. Selanjutnya buat form input berikut:

<!-- HTML -->
<div class="form-group">
    <label>Judul</label>
    <input type="text" v-model="judul" class="form-control">
</div>
<div class="form-group">
    <label>Konten</label>
    <textarea v-model="konten" class="form-control"></textarea>
</div>
<div class="form-group">
    <button class="btn btn-danger btn-sm" @click="simpan">Kirim</button>
</div>
​
<!-- Vue.js -->
new Vue({
    el: '#dw',
    data: {
        judul: '',
        konten: '',
        lists: [
            {
                judul: 'Belajar vue',
                konten: 'belajar vue dengan materi component'
            }
        ]
    },
    methods: {
        simpan() {
            this.lists.push({
                judul: this.judul,
                konten: this.konten
            })
        }
    }
}); 

Secara default kita telah memiliki sebuah data berupa objek array, dimana saat tombol diklik maka data tersebut akan ditambahkan dengan menggunakan method simpan(). Selanjutnya tambahkan code berikut untuk menampilkan data menggunakan custom component yang telah kita miliki

<panel v-for="list in lists" :listdata="list"></panel>

Code diatas melakukan looping dengan menggunakan directive v-for kemudian mengirim data ke component dengan menggunakan directive v-on:bind.

Maka code lengkapnya apabila digabungkan akan menjadi seperti ini:

<!DOCTYPE html>
<html>
<head>
    <title>Computed Properties - 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">
    <style type="text/css">
        body {
            padding-top: 60px;
        }
    </style>
</head>
<body>
    <div id="dw" class="container">
        <div class="row">
            <div class="col-md-12">
                <panel v-for="list in lists" :listdata="list"></panel>
            </div>
            <div class="col-md-12">
                <div class="form-group">
                    <label>Judul</label>
                    <input type="text" v-model="judul" class="form-control">
                </div>
                <div class="form-group">
                    <label>Konten</label>
                    <textarea v-model="konten" class="form-control"></textarea>
                </div>
                <div class="form-group">
                    <button class="btn btn-danger btn-sm" @click="simpan">Kirim</button>
                </div>
            </div>
        </div>
    </div>
​
    <script type="text/javascript" src="https://unpkg.com/[email protected]/dist/vue.js"></script>
    
    <template id="panel">
        <div class="panel panel-primary">
            <div class="panel-heading">
                {{ listdata.judul }}
            </div>
            <div class="panel-body">
                {{ listdata.konten }}
            </div>
        </div>
    </template>
    
    <script type="text/javascript">
        Vue.component('panel', {
            props: ['listdata'],
            template: '#panel'
        });
​
        new Vue({
            el: '#dw',
            data: {
                judul: '',
                konten: '',
                lists: [
                    {
                        judul: 'Belajar vue',
                        konten: 'belajar vue dengan materi component'
                    }
                ]
            },
            methods: {
                simpan() {
                    this.lists.push({
                        judul: this.judul,
                        konten: this.konten
                    })
                }
            }
        }); 
    </script>
</body>
</html>

Berkomunikasi Dengan Component: Custom Event

Best practice lain dalam berkomunikasi dengan component adalah membuat custom event, sebab tidak hanya berupa data yang dapat di-passing kedalam component tapi juga sebuah event. Maka pada contoh kali ini kita akan mencoba mempraktekkan membuat sebuah custom event yang akan digunakan oleh component.

<!-- HTML -->
<domain v-model="domain" @applied="cekDomains"></domain>
<p v-if="tersedia"><strong>{{ domain }}</strong> Tersedia!</p>
​
<!-- template -->
<template id="form">
    <div>
        <input class="form-control" ref="input" :value="value" @input="cekDomain($event.target.value)">
        <button v-on:click="cekDomains" class="btn btn-danger">Cek</button>
    </div>
</template>
​
<!-- Vue Component -->
Vue.component('domain', {
    props: ['value'],
    template: '#form',
    methods: {
        cekDomain(value) {
            this.$emit('input', value);
        },
        cekDomains() {
            this.$emit('applied');
        }
    }
});
​
<!-- Vue Instance -->
new Vue({
    el: '#dw',
    data: {
        domain: '',
        tersedia: false
    },
    methods: {
        cekDomains() {
            this.tersedia = true;
        }
    }
}); 

Pada code diatas kita membuat custom event bernama applied yang di-bind untuk mengakses method cekDomains pada component. Untuk berkomunikasi dengan child component, maka kita menggunakan $emit pada child component untuk mengeksekusi custom event tersebut.

Maka code lengkapnya akan menjadi seperti ini:

<!DOCTYPE html>
<html>
<head>
    <title>Components - 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">
    <style type="text/css">
        body {
            padding-top: 60px;
        }
    </style>
</head>
<body>
    <div id="dw" class="container">
        <domain v-model="domain" @applied="cekDomains"></domain>
        <p v-if="tersedia"><strong>{{ domain }}</strong> Tersedia!</p>
    </div>
​
    <script type="text/javascript" src="https://unpkg.com/[email protected]/dist/vue.js"></script>
    
    <template id="form">
        <div>
            <input class="form-control" ref="input" :value="value" @input="cekDomain($event.target.value)">
            <button v-on:click="cekDomains" class="btn btn-danger">Cek</button>
        </div>
    </template>
    <script type="text/javascript">
        Vue.component('domain', {
            props: ['value'],
            template: '#form',
            methods: {
                cekDomain(value) {
                    this.$emit('input', value);
                },
                cekDomains() {
                    this.$emit('applied');
                }
            }
        });
​
        new Vue({
            el: '#dw',
            data: {
                domain: '',
                tersedia: false
            },
            methods: {
                cekDomains() {
                    this.tersedia = true;
                }
            }
        }); 
    </script>
</body>
</html>

Selain menggunakan props dan $emit, pendekatan lain yang dapat digunakan untuk berkomunikasi dengan component adalah dengan menggunakan refs yang dapat memberikan akses terhadap methods dari sebuah component lain.

<custom-component ref="cuscom"></custom-component>
​
CustomComponent.vue
export default{
    methods:{
        methodOnCustomComponent(){
            // your own code here
        }
    }
}

Untuk memanggil method dari component di atas melalui component lain tinggal menggunakan "refs"

Vue.$refs.(ref name).(method name)
​
// contoh
this.$refs.cuscom.methodOnCustomComponent();

 

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