Kemarin kita sudah berhasil belajar membuat sebuah template dengan vuejs, lalu kita juga sudah berhasil belajar menggunakan props, untuk selanjutnya kita akan coba cara menampilkan data array di template component VueJS, caranya hampir sama ketika kita menampilkan sebuah data array seperti biasanya, tujuannya artikel kali ini adalah untuk mengexplore artikel kita kemarin yaitu tentang component dan props, oke bagaimana cara membuatnya simak terus ya teman-teman.

Cara menampilkan data array di template component VueJS, sebenarnya sudah saya singgung di atas yaitu kita membutuhkan bantuan props, ya, jika teman-teman baru saja bergabung teman-teman bisa lihat sebentar artikel sebelumnya tentang props, jadi nantinya dimana disini saya sudah berhasil membuat sebuah template, lalu template itu kita akan tampilkan sebuah data arraynya, disini saya akan menggunakan list group dari sebuah bootstrap supaya lebih cantik dan data arraynya saya contohkan 4 saja ya teman-teman.

dan saya harap teman-teman jangan lupa penggunaan bind ya, karena disini saya akan menggunakan sebuah bind di attributenya. oke langsung saja bagaimana cara membuatnya silahkan teman-teman copy saja kode di bawah ini:

Bisa dilihat saya membuat sebuah component “new-tag”  dengan data props yaitu nama dan alamat,  untuk template yang saya buat tidak susah ya untuk di baca, dan seperti yang saya tulis di atas di dalam tag component saya menggunakan bind nama dan alamat, dan hasilnya akan seperti ini:

Cara menampilkan data array di template component VueJS

Bagaimana apakah sudah sama, saya harap teman-teman sudah terkoneksi internet ya, karena disini saya menggunakan sebuah CDN vue dan bootstrapnya, dan saya rasa cukup sampai disini belajar kita tentang Cara menampilkan data array di template component VueJS, semoga bermanfaat dan sampai jumpa pada artikel selanjutnya terimakasih.