Spaces:
Running
Running
File size: 4,677 Bytes
7da13d6 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 |
x-for
=====
Alpine's `x-for` directive allows you to create DOM elements by iterating through a list. Here's a simple example of using it to create a list of colors based on an array.
<ul x-data="{ colors: ['Red', 'Orange', 'Yellow'] }"> <template x-for="color in colors"> <li x-text="color"></li> </template></ul>
<ul x-data="{ colors: ['Red', 'Orange', 'Yellow'] }">
<template x-for="color in colors">
<li x-text="color"></li>
</template>
</ul>
* Red
* Orange
* Yellow
You may also pass objects to `x-for`.
<ul x-data="{ car: { make: 'Jeep', model: 'Grand Cherokee', color: 'Black' } }"> <template x-for="(value, index) in car"> <li> <span x-text="index"></span>: <span x-text="value"></span> </li> </template></ul>
<ul x-data="{ car: { make: 'Jeep', model: 'Grand Cherokee', color: 'Black' } }">
<template x-for="(value, index) in car">
<li>
<span x-text="index"></span>: <span x-text="value"></span>
</li>
</template>
</ul>
* make: Jeep
* model: Grand Cherokee
* color: Black
There are two rules worth noting about `x-for`:
> `x-for` MUST be declared on a `<template>` element. That `<template>` element MUST contain only one root element
[Keys](#keys)
-------------
It is important to specify unique keys for each `x-for` iteration if you are going to be re-ordering items. Without dynamic keys, Alpine may have a hard time keeping track of what re-orders and will cause odd side-effects.
<ul x-data="{ colors: [ { id: 1, label: 'Red' }, { id: 2, label: 'Orange' }, { id: 3, label: 'Yellow' },]}"> <template x-for="color in colors" :key="color.id"> <li x-text="color.label"></li> </template></ul>
<ul x-data="{ colors: [
{ id: 1, label: 'Red' },
{ id: 2, label: 'Orange' },
{ id: 3, label: 'Yellow' },
]}">
<template x-for="color in colors" :key="color.id">
<li x-text="color.label"></li>
</template>
</ul>
Now if the colors are added, removed, re-ordered, or their "id"s change, Alpine will preserve or destroy the iterated `<li>`elements accordingly.
[Accessing indexes](#accessing-indexes)
---------------------------------------
If you need to access the index of each item in the iteration, you can do so using the `([item], [index]) in [items]` syntax like so:
<ul x-data="{ colors: ['Red', 'Orange', 'Yellow'] }"> <template x-for="(color, index) in colors"> <li> <span x-text="index + ': '"></span> <span x-text="color"></span> </li> </template></ul>
<ul x-data="{ colors: ['Red', 'Orange', 'Yellow'] }">
<template x-for="(color, index) in colors">
<li>
<span x-text="index + ': '"></span>
<span x-text="color"></span>
</li>
</template>
</ul>
You can also access the index inside a dynamic `:key` expression.
<template x-for="(color, index) in colors" :key="index">
<template x-for="(color, index) in colors" :key="index">
[Iterating over a range](#iterating-over-a-range)
-------------------------------------------------
If you need to simply loop `n` number of times, rather than iterate through an array, Alpine offers a short syntax.
<ul> <template x-for="i in 10"> <li x-text="i"></li> </template></ul>
<ul>
<template x-for="i in 10">
<li x-text="i"></li>
</template>
</ul>
`i` in this case can be named anything you like.
> Despite not being included in the above snippet, `x-for` cannot be used if no parent element has `x-data` defined. [→ Read more about `x-data`](/directives/data)
[Contents of a `<template>`](#contents-of-a-template)
-----------------------------------------------------
As mentioned above, an `<template>` tag must contain only one root element.
For example, the following code will not work:
<template x-for="color in colors"> <span>The next color is </span><span x-text="color"></template>
<template x-for="color in colors">
<span>The next color is </span><span x-text="color">
</template>
but this code will work:
<template x-for="color in colors"> <p> <span>The next color is </span><span x-text="color"> </p></template>
<template x-for="color in colors">
<p>
<span>The next color is </span><span x-text="color">
</p>
</template>
[← x-modelable](/directives/modelable)
[x-transition →](/directives/transition)
Code highlighting provided by [Torchlight](https://torchlight.dev) |