Berkenalan dengan Vue.js : Directive Conditional (v-if, v-else, v-show) dan List Rendering (v-for)

Show, Photo by Andre Benz on Unsplash

Pada artikel sebelumnya telah dibahas intallasi, basic rendering dan pada artikel kali ini akan membahas directive conditional dan list rendering.

Directive

Directive adalah markup khusus untuk memberitahu library untuk melakukan sesuatu pada DOM element.

Beberapa directive yang ada pada Vue.js antara lain :

• v-show dimana digunakan untuk menampilkan element dalam suatu kondisi
• v-if directive conditional yang bisa digunakan selain vue-show (akan dibahas lebih lanjut)
• v-else untuk menampilkan element apabila v-if berkondisi false.
• v-else-if directive conditional else dengan kondisi (else biasa tidak mempunyai kondisi tertentu dan digunakan sebagai statement default apabila kondisi tidak memenuhi if statement).

v-show

Untuk mendemonstrasikan directive v-show, kita akan membuat sesuatu yang simple, misal kita ingin membuat tampilan kondisional dimana tombol submit tidak muncul sebelum user menuliskan message di input. bagaimana kita mengimplementasikan nya dengan vue?

Contoh penggunaan v-show vue

Contoh diatas kita memliki file HTML dengan div id=“app“ sebagai root vue dan menggunakan v-model binding pada textarea, agar setiap data yang berubah akan terupdate melalui vue-instance.

Lalu terdapat vue-show pada button, yang akan menampilkan button ketika message diisi. parameter vue-show bersifat true/false, pada saat message kosong/null maka akan dianggap false.

v-if

Untuk v-if sama seperti v-show, namun perbedaan v-if dengan vue-show adalah, v-if menghilangkan/mendestroy dom object ketika tidak sesuai kondisi dan menambahkan kembali ke dalam DOM Element apabila kondisi v-if terpenuhi, berbeda dengan v-show yang hanya menyembunyikan DOM Element dan menampilkan nya kembali ketika vue-show dalam kondisi true.

ketika menggunakan v-if, apabila kondisi salah pada saat awal rendering / awal load, maka tidak akan merender dom object, block-scope kondisional tidak akan di render sampai kondisi true atau benar untuk pertama kali. v-if memiliki toggle cost yang tinggi, dan v-show memiliki initial render yang besar.

Oleh karena itu, jika membutuhkan data yang di toggle (hidden dan show cukup sering) gunakan v-show. dan gunakan v-if apabila data tidak berubah pada web sudah berjalan.

Contoh seperti menu yang di sembunyikan karena user tidak memiliki hak akses, bisa menggunakan v-if. Atau menyembunyikan data saat initial render sampai data terload semua dari backend bisa menggunakan v-show.

Contoh v-if vue

v-for

Directive ini sama seperti for/foreach pada umumnya yaitu melakukan iterasi dalam kondisi tertentu, pada vue v-for biasanya digunakan untuk melakukan iterasi data dalam array/object data.

range v-for

Iterasi v-for dalam range tertentu misal, melakukan iterasi 0 sampai 10 untuk melakukan perkalian :

v-for range

Dari kode diatas maka akan menampilkan data seperti berikut :

v-for range example

loop v-for dari array

Misal ada sebuah array yang berisikan todo list seperti berikut :

todos: [
    "bugfix production",
    "nulis blog",
    "padamkan kebakaran",
    "beli makan malam"
]

Bagaimana mengiterasi data tersebut untuk menampilkan ke dalam html dengan menggunakan vue? berikut contoh implementasi nya.

maka hasilnya seperti berikut :

todo list

Pada contoh diatas, data array dimasukkan ke dalam data instance vue, dan kita cukup melakukan loop dengan v-for=”for todo in todos” parameter pertama merupakan alias yang digunakan untuk menampilkan variable dalam iterasi loop, dan parameter ke2 merupakan array/object data yang akan di loop kedalam v-for. Dan juga menampilkan object pada $data instance vue untuk menampilkan isi object $data, yang biasa digunakan untuk melakukan debugging :D.

Oke sekian pembahasan kali ini, semoga bermanfaat.