Halo teman-teman semuanya! Setelah sebelumnya kita belajar bagaimana menangani kondisi dengan x-show dan x-if, sekarang saatnya kita bahas bagaimana caranya menampilkan data dalam bentuk daftar atau list menggunakan directive x-for.
Directive ini sangat berguna kalau kita ingin menampilkan banyak elemen berdasarkan array, misalnya daftar produk, komentar, atau apapun yang berbentuk koleksi data.
Apa Itu x-for?
x-for adalah directive yang digunakan untuk melakukan perulangan (looping) terhadap data array di Alpine.js. Konsepnya mirip seperti v-for di Vue.js atau forEach di JavaScript, tapi langsung digunakan di dalam HTML.
Format umum:
<div x-for="item in daftar">
{{ item }}
</div>
Contoh Dasar
<div x-data="{ buah: ['Apel', 'Jeruk', 'Mangga'] }">
<ul>
<template x-for="item in buah" :key="item">
<li x-text="item"></li>
</template>
</ul>
</div>
Penjelasan:
x-for="item in buah" artinya kita akan looping tiap item di dalam array buah.x-text="item" digunakan untuk menampilkan nilai item.- Kita menggunakan
<template> untuk membungkus elemen yang akan diulang, dan Alpine akan menggandakan isi dari template-nya.
Menampilkan Index
Kalau kita ingin menampilkan indeks dari setiap item, kita bisa gunakan sintaks ini:
<template x-for="(item, index) in buah" :key="index">
<li x-text="`${index + 1}. ${item}`"></li>
</template>
x-for dengan Object Array
Kita juga bisa melakukan looping terhadap array yang berisi objek:
<div x-data="{ users: [
{ nama: 'Ali', umur: 20 },
{ nama: 'Budi', umur: 25 },
{ nama: 'Citra', umur: 22 }
] }">
<ul>
<template x-for="user in users" :key="user.nama">
<li>
<strong x-text="user.nama"></strong> - <span x-text="user.umur + ' tahun'"></span>
</li>
</template>
</ul>
</div>
Penting: Jangan Lupa :key
Sama seperti framework frontend lainnya, Alpine menyarankan untuk selalu menambahkan :key agar performa optimal dan perubahan DOM bisa dilacak dengan lebih baik.
<template x-for="item in list" :key="item.id">
Looping Dinamis
Kita bisa menggabungkan x-for dengan event handling atau input user, misalnya menambahkan item baru ke dalam list:
<div x-data="{ items: [], baru: '' }">
<input type="text" x-model="baru">
<button @click="items.push(baru); baru = ''">Tambah</button>
<ul>
<template x-for="(item, i) in items" :key="i">
<li x-text="item"></li>
</template>
</ul>
</div>
Kesimpulan
Di artikel ini, kita sudah belajar bagaimana menggunakan x-for untuk menampilkan data dalam bentuk daftar. Kita juga sudah lihat bagaimana x-for bisa digabung dengan x-text, input user, bahkan objek.
Pada artikel berikutnya, kita semua akan belajar tentang Class dan Style Binding di Alpine.js.
Terima Kasih