Hallo Coder 😀, di permbahasan sebelumnya kita telah membahas Menggunakan v-bind di vue js, dan di pembahasan sekarang kita akan membahas Bagaimana caranya membuat List di Vue js.

Data dalam bentuk list atau daftar yang bisa berupa array , objek atau collection (array dari objek) bisa kita tampilkan dengan mudah menggunakan Vue Js

Membuat List di Vue Js

Sebagai contoh, kita mempunyai data array bahasa pemograman seperti berikut ini

Jika kita masukan dalam vue js kira kira seperti berikut ini

Nah kita telah punya data yang akan ditampilkannya sekarang kita akan menampilkan datanya dalam bentuk list menggunakan tag <li>

Dalam tag <li v-for="language in languages"> berfunsi untuk mengulang setiap data yang ada. Vue mempunyai directive v-for yang berfungsi untuk melakukan perulangan sebanyak elemen data yang ada pada variabel languages.

berbeda dengan php jika kita akan menampilkan biasanya kita menggunakan foreach, variable array nya biasanya di depan, seperti ini.

Sedangkan di vue js kita memangilnya dibelakang. mari kita lihat hasil dari List nya vue


Menampilkan Data Collection

Pada kasus nyata, seringkali kita dapati data tidak dalam bentuk array sederhana ataupun objek, melainkan dalam bentuk yang lebih kompleks semisal array dari objek atau dalam format JSON. apalagi sekarang lagi buming nya web servis, Terus bagaimana jika kita dapat data array dalam bentuk seperti ini.

kita ingin menapilkanya sesuai keynya. misalkan hanya data namanya saja atau data harganya saja. misalkan kita ingin menampilkan datanya kedalam bentuk table.

maka kita akan memakai template seperti ini

Mari kita bedah satu persatu code diatas.

karena kita akan menampilkannya dalam bentuk table maka kita harus meloopingnya di dalam tag <tbody> agar dapat tersusun rapih, codenya seperti berikut ini.

Oleh karena variabel c yang dihasilkan dari perulangan variabel courses berbentuk objek, maka kita bisa panggil setiap item didalamnya dengan menggunakan titik diikuti nama keynya.

contoh penerapanya seperti berikut ini.

Dan berikut Code kumplitnya.

Code Lengkapnya

kamu bisa menerapkannya sesuai keinginan kamu, bisa dalam bentuk list bisa dalam table ataupun card. jadi, salam coder.😃😃😃

shares