x-for

x-for di Alpine.js digunakan untuk merender elemen HTML berulang kali berdasarkan data dari sebuah array atau objek yang Anda miliki. Mirip dengan v-for di Vue.js atau ng-repeat di AngularJS, x-for membantu dalam membuat daftar elemen dinamis di dalam template HTML Anda.

Contoh Penggunaan x-for

Misalkan Anda punya sebuah array items yang ingin Anda tampilkan sebagai daftar di HTML:

<div x-data="{ items: ['Apple', 'Banana', 'Cherry'] }"> <template x-for="item in items" :key="item"> <div x-text="item"></div> </template>
</div>

Penjelasan:
A. x-data="{ items: ['Apple', 'Banana', 'Cherry'] }": Inisialisasi data items dengan tiga elemen: ‘Apple’, ‘Banana’, dan ‘Cherry’.
B. <template x-for="item in items" :key="item">: Menggunakan x-for untuk iterasi melalui items. Setiap iterasi, item akan berisi nilai dari array tersebut.
C. <div x-text="item"></div>: Menampilkan nilai item di dalam elemen <div>.

Dengan ini, Anda akan mendapatkan output sebagai berikut:

Apple
Banana
Cherry

Penggunaan x-for dengan Objek

Jika Anda menggunakan objek, Anda bisa melakukan iterasi melalui nilai atau kunci objek tersebut. Contoh:

<div x-data="{ fruits: { apple: 'red', banana: 'yellow', cherry: 'red' } }"> <template x-for="(key, value) in fruits" :key="key"> <div> <span x-text="key"></span>: <span x-text="value"></span> </div> </template>
</div>

Ini akan menampilkan daftar buah-buahan dengan warna mereka masing-masing:

apple: red
banana: yellow
cherry: red

Dengan x-for, Anda bisa dengan mudah merender daftar elemen dinamis berdasarkan data yang Anda miliki, sehingga mempermudah dalam membuat antarmuka yang interaktif dan dinamis.