Penggunaan Directive Dan Method Pada VueJS

Directive adalah fitur yang sangat bermanfaat ketika kita membangun aplikasi dengan menggunakan framework javascript. Directive ini bekerja sebagaimana kita menggunakan attribute pada tag HTML. Contohnya sendiri banyak salah satu yang sudah kita bahas yakni v-model yang digunakan untuk melakukan data binding pada data di model. Contoh yang akan kita bahas untuk artikel kali ini adalah directive v-if. v-if ini berguna ketika kita ingin menampilkan sebuah elemen hanya ketika nilai dari v-ifnya menghasilkan nilai true. Untuk menggunakan v-if kita akan membuat sebuah fitur pada aplikasi yang sedang kita rancang sebelumnya. Ketika kita klik tombol link baru maka formnya akan muncul dan ada tombol batal untuk menghilangkan formnya. Gimana cara buatnya ? yuk kita coba yang pertama kita siapkan button link baru sebagai berikut

di VueJS kita juga dapat menambahkan sebuah method pada view model yaitu showForm. contohnya seperti berikut

saya akan merubah nilai dari formOpen menjadi true.
yang sebelumnya kita akan berikan data di model formOpen nilainya false. yang menentukan form ini sedang terbuka atau tidak dan pastikan semua elemen html dibungkus dengan #tampil

kemudian di form kita akan membuat form ini tidak terlihat ketika data formOpennya bernilai false. lalu saya buat sebuah v-if sebagai berikut

dan setelah form ditampilkan maka tombol link akan di hilangkan. Maka kita berikan v-if seperti ini

yang artinya kita negasikan hasil nilainya. Cukup itu dulu penjelasan method dan directive v-if semoga bermanfaat.