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.
Top comments (0)