Penggunaan Directive V For Pada Vue Js

25/03/2017    Ekky Ridyanto    2912    Website

Kita akan melihat dan belajar directive lainnya yaitu untuk melakukan perulangan atau loop yang mana kita dapat menampilkan semua nilai array atau pun objectnya. Tentu untuk kasus ini saya berikan contohnya statis tapi teman teman berpikir ini bisa dilakukan dengan mengambil datanya melalui server lalu kita akan mendapatkan hasil response dalam bentuk JSON. Nah sebagai contoh saya akan buat property lessons didalam object datanya sebagai data array dari materinya yang isinya sebagai berikut

nah misalnya saya ingin menampilkan semua daftar list dari data lessonsnya untuk itu kita akan tempatkan didalam tag listnya lalu dibagian listnya kita akan berikan directive v-for yang nilainya kita tulis nama-baru dan diikuti dengan keyword in lalu ada data array yang ingin ditampilkan pada kasus ini adalah variabel lessons sebagai berikut

dan untuk mendapatkan datanya kita bisa tulis didalam kurung kurawal dua kali untuk menuliskan variabel nama-baru sebagai data arraynya seperti ini

maka akan kita akan dapat hasil yang inginkan yaitu menampilkan nama materinyaa didalam elemen listnyaa.

Jadi sangatlah simple caranya kita tinggal menggunakan metode v-for. Selain string atau pun array teman teman bisa menampilkan sebuah angka increment dengan menentukan nama variabel sebagai nama-baru lalu kita ingin melakukan perulangan sampai 5

kita akan tulis variabel nama-barunya didalam sebuah kurung kurawalnya. Maka teman teman lihat dibagian browsernya akan melihat perulangan dari angka 0 sampai 4. Oke itu dia penggunaan directive v-for pada vuejs. Selamat mencoba

Artikel, Web Design, Javascript, website