Mengenal Property Data pada Vue Instance

Sebagai pengingat dari seri sebelumnya, Vue Instance adalah titik awal dari aplikasi Vue yang berisi property data dan berguna untuk mengikat (Bind) data dari Instance yang kita miliki serta pada Template. Di bagian akhir dari seri sebelumnya, kita telah mengikat atau menghubungkan nilai dari porperti data salam kedalam teks yang ada di tag <h2>. Sekarang, mari kita coba kembali pelajaran sebelumnya serta mengenal lebih dalam tentang properti data:

new Vue({
    el: '#aplikasi',
    data: {
        salam: 'Halo Semuanya!',
        nama: 'Yasya El Hakim',
        jabatan: 'Author',
    },
});


Disini, kita telah menambahkan properti data seperti nama dan jabatan yang memiliki nilai Yasya El Hakim dan Author. Sekarang, kita dapat menggunakan ulang Mustache Syntax untuk mengikat properti data tersebut kedalam template yang telah kita buat sebelumnya:

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="./styles.css" />
    <title>Tutorial Vue | EL Creative Academy</title>
</head>
<body>
    <div id="aplikasi">
        <h2>{{ salam }}</h2>
        <p>Salam dari {{ nama }} yang merupakan {{ jabatan }} di EL Creative Academy.</p>
    </div>
    <script src="https://unpkg.com/vue"></script>
    <script src="./main.js"></script>
</body>
</html>


Catatan: Pada kode diatas, saya telah menambahkan stylesheet yang bernama styles.css untuk membuat Styling pada halaman HTML.

Dengan menggunakan properti data yang di kaitkan kedalam Template, sekarang kita dapat melihat nilainya pada aplikasi yang telah kita buat.

Property Data

Pada Vue, informasi yang ada di dalam properti data dari Instance di kenal dengan istilah Reactive. Artinya, kita telah mengatur dan memodifikasi atau mengubah nilai dari data Vue Instance, Vue akan melihat perubahan tersebut dan me-render ulang Template untuk menampilkan nilai data yang telah di perbarui.



Method dan Event Handling pada Vue

Sekarang, mari kita lihat contoh dari data reactivity. Untuk melihat perubahan data dengan jelas, kita akan membuat sebuah Tombol yang berfungsi untuk mengubah pesan dari properti data salam dan meletakkan tombol tersebut di bagian bawah Template:

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="./styles.css" />
    <title>Tutorial Vue | EL Creative Academy</title>
</head>
<body>
    <div id="aplikasi">
        <h2>{{ salam }}</h2>
        <p>Salam dari {{ nama }} yang merupakan {{ jabatan }} di EL Creative Academy.</p>
        <button>Ubah Salam</button>
    </div>
    <script src="https://unpkg.com/vue"></script>
    <script src="./main.js"></script>
</body>
</html>


Untuk sekarang, tombol yang kita buat tidak memiliki fungsi apapun. Selanjutnya, kita dapat memberikan Event Click Listener kedalam tombol untuk memancing perubahan dari properti salam. Untuk melakukannya, kita dapat menggunakan Instance Method Property:

new Vue({
    el: '#aplikasi',
    data: {
        salam: 'Halo Semuanya!',
        nama: 'Yasya El Hakim',
        jabatan: 'Author',
    },
    methods: {
        // instance method
    }
});


Properti methods dari Vue Instance dapat menentukan metode kedalam Instance yang sama halnya dengan fungsi JavaScript pada umumnya (Akan dijalankan ketika di panggil). Pada methods tersebut, kita dapat langsung mengubah nilai dari data yang telah disimpan.

Catatan: Selain menggunakan methods, kita juga dapat menuliskannya secara Inline pada Template, kita akan mempelajarinya pada bagian yang akan datang.

Contoh, disini kita akan membuat metode Toggle ubahSalam() kedalam properti data salam:

new Vue({
    el: '#aplikasi',
    data: {
        salam: 'Halo Semuanya!',
        nama: 'Yasya El Hakim',
        jabatan: 'Author',
    },
    methods: {
        ubahSalam() {
            this.salam = this.salam === 'Halo Semuanya!' ?
            'Halo Gaes!' :
            'Halo Semuanya!';
        }
    }
});


Pada kode diatas, kita telah menggunakan operator Ternary untuk membuat Toggle pada nilai properti data salam dari Halo Semuanya! menjadi Halo Gaes! begitupula sebaliknya.

Bagaimana cara mereferensikan nilai dari property salam dengan this.salam? Ketika Vue Instance telah dipakai (Instantiated), Vue akan langsung membuat serangkaian Getter dan Setter untuk setiap properti data agar dapat membuatnya menjadi Reactive. Dalam sebuah Instance, objek data dapat diakses dengan this.$data. Dengan melakukan Proxying, Vue akan memproxikan semua properti dari Instance. Jadi, this.$data.salam dapat dipersingkat dan artinya akan sama seperti this.salam. Kita akan membahas lebih lengkap tentang Reactivity dan Data-Driven Vue App pada bagian selanjutnya, sambil mempelajari bagian ini, kalian juga dapat melihat dokumentasi Official tentang Options/Data dari Vue.

Pada kode sebelumnya, kita sudah mempersiapkan sebuah metode. Sekarang, kita perlu memanggil metode tersebut dari Template. Ketika pengguna mengklik tombol Ubah Salam. Untuk melakukan Handling pada interaksi tersebut, kita dapat menggunakan direktif v-on.

Catatan: Directive dari Vue merupakan perintah spesial yang dapat di tambahkan kedalam konten HTML. Kita akan membahasnya pada bagian yang akan datang.

Directive (Direktif) v-on adalah salah satu dari Directive Vue yang tersedia. Untuk dapat menerima (Listening) Event klik dan menjalankan metode Instance ubahSalam(), kita dapat menambahkan direktif v-on sebagai Click Listener pada elemen button. Contoh:

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="./styles.css" />
    <title>Tutorial Vue | EL Creative Academy</title>
</head>
<body>
    <div id="aplikasi">
        <h2>{{ salam }}</h2>
        <p>Salam dari {{ nama }} yang merupakan {{ jabatan }} di EL Creative Academy.</p>
        <button v-on:click='ubahSalam'>Ubah Salam</button>
    </div>
    <script src="https://unpkg.com/vue"></script>
    <script src="./main.js"></script>
</body>
</html>


Ketika kita mengeklik tombol Ubah Salam, metode ubahSalam() akan segera dipanggil dan akan mengubah nilai dari properti salam. Ketika properti data salam telah berubah, Template akan ter-render ulang secara otomatis agar dapat menampilkan perubahannya.

Sekarang, kalian dapat melihat Live Demonya pada Link dibawah ini. Klik tombol Ubah Salam beberapa kali untuk melihat perubahan pada teks Halo Semuanya!

Method Event-Handler
Lihat kode di Github | Lihat Live Demo

Mungkin cukup sampai disini dulu pembahasan tentang Property Data di Vue, kalian dapat mencobanya sampai benar-benar paham dengan beberapa contoh diatas. Semoga bermanfaat dan terimakasih telah berkunjung di EL Creative Academy.

Tulis Komentar

0 Komentar