This content originally appeared on DEV Community and was authored by Muhammad Iqbal
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.
This content originally appeared on DEV Community and was authored by Muhammad Iqbal