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:
<!DOCTYPE html>
<html>
<head>
<title>Cara Menampilkan Data Array di Template Component VueJS</title>
<meta charset="utf-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
</head>
<body>
<div class="container app mt-3">
<div class="col-md-4 offset-md-4">
<h1 class="text-center">Cara Menampilkan Data Array di Template Component VueJS</h1>
<hr>
<new-tag v-for="member in members" v-bind:nama="member.nama" v-bind:alamat="member.alamat"></new-tag>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.2/dist/vue.js"></script>
<script type="text/javascript">
Vue.component('new-tag',{
props: ['nama', 'alamat'],
template: `
<div>
<ul class="list-group">
<li class="list-group-item"><strong>Nama:</strong> {{nama}}, <strong>alamat:</strong> {{alamat}}</li>
</ul>
</div>
`
})
new Vue({
el: '.app',
data:{
members : [
{nama: 'Bani', alamat: 'Kali Sungai'},
{nama: 'Santoro', alamat: 'Kali anyar'},
{nama: 'Ronald', alamat: 'Pejagalan Timur'},
{nama: 'Safitri', alamat: 'Kebayoran lama'},
]
}
})
</script>
</body>
</html>
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:
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.