Tutorial kali ini akan membahas bagaimana menggunakan perulangan di vue.
Untuk melakukan ini di vue kita menggunakan directive v-for.
Menampilkan data array
Misalnya kita punya data array nama-nama siswa
siswa: ["budi","andi","caca"]
atau jika menggunakan struktur vue akan seperti ini.
export default {
name: "App",
data: () => {
return {
siswa: ["budi","andi","caca"]
};
}
};
Data tersebut akan kita tampilkan menggunakan v-for.Maka template vue nya akan menjadi seperti ini
<ul>
<li v-for="nama in siswa">
{{ nama }}
</li>
</ul>Kita menggunakan html list untuk menampilkan nama siswa.Bisa dilihat kita melakukan perulangan dengan variable siswa dan nama sebagai alias untuk item satuan.Kemudian karena ini hanya array kita langsung mencetak dengan {{nama}}.
Kita juga bisa menampilkan index dari masing-masing data tersebut dengan menambahkan kode seperti dibawah.
<ul>
<li v-for="(nama,index) in siswa">
{{index+1}}.{{ nama }}
</li>
</ul>Index diawali dari 0 jadi kita menambah 1 ketika mencetak.Maka akan keluar hasil seperti dibawah ini.
Menampilkan data object
Sebenarnya cara sama saja menampilkan data object ataupun array dengan v-for
Jika kita punya data seperti dibawah ini.
siswa : {
nama:'budi',
kelas:'XII-A',
jurusan:'RPL'
}
Kode template sama saja
<ul>
<li v-for="value in siswa">
{{ value }}
</li>
</ul>Kita juga bisa menampilkan key dari object sebagimana index dari array sebelumnya.
<ul>
<li v-for="(value,key) in siswa">
{{key}} : {{ value }}
</li>
</ul>Maka akan mendapatkan hasil seperti dibawah ini.
Di object kita bisa menambahkan satu parameter lagi yaitu index sehingga menjadi seperti ini.
<ul>
<li v-for="(value,key,index) in siswa">
{{index+1}}. {{key}} : {{ value }}
</li>
</ul>
Menampilkan Data Collection
Jika kita mendapatkan data dari api backend,seringkali data yang didapatkan berbentuk collection atau array object atau berformat data JSON.
Misalnya seperti data dibawah.
siswa : [
{
nama:'budi',
kelas:'XII-A',
jurusan:'RPL'
},
{
nama:'andi',
kelas:'XII-B',
jurusan:'TKJ'
},
{
nama:'caca',
kelas:'XII-A',
jurusan:'RPL'
}
]
Kita akan menampilkan kedalam html tabel.Maka kode v-for untuk table kurang lebih seperti dibawah ini.
<table border="1">
<tr>
<th>No</th>
<th>Nama</th>
<th>Kelas</th>
<th>Jurusan</th>
</tr>
<tr v-for="(data,index) in siswa">
<td>{{index+1}}</td>
<td>{{data.nama}}</td>
<td>{{data.kelas}}</td>
<td>{{data.jurusan}}</td>
</tr>
</table>Kenapa kita meletakkan v-for di tr,karena tr lah yang akan kita looping sebanyak data siswa.data.nama berarti kita memanggil key nama dari variabel data yang sudah jadi objek dari perulangan siswa.
Attribut v-bind:key
Attribut ini bisa juga dipanggil hanya dengan :key.Jika kita menggunakan v-for maka vue menyarankan kita harus menggunakan attribute ini,di IDE apalagi yang menggunakan syntax linter ,akan menunjukan warning di baris kodenya jika kita tidak menambahkan key saat pakai v-for.Attribute ini berperan sebagai penanda unik ,kayak primary key lah kalau di database,agar vue bisa melakukan tracking perubahan setiap tag html saat dirender.
Asal dari :key ini bisa dari index dari array,key atau properti dari object.
Contohnya :
<ul>
<li v-for="(value,index) in siswa" v-bind:key="index">
{{index+1}}. {{ value }}
</li>
</ul>atau jika kita punya object yang memiliki attribute unik.
siswa : [
{
id:1,
nama:'budi'
},
{
id:2,
nama:'andi'
}
]
Maka kode htmlnya bisa seperti dibawah ini.
<ul>
<li v-for="(data,index) in siswa" v-bind:key="data.id">
{{index+1}}. {{ data.nama }}
</li>
</ul>Sampai sini dulu pembahasan mengenai penggunaan v-for,silahkan bertanya dibawah jika ada yang kurang dimengerti.