|
@@ -490,6 +490,20 @@ If you want to access the current index of the iteration, use the following synt
|
|
|
</template>
|
|
|
```
|
|
|
|
|
|
+If you want to access the array object (collection) of the iteration, use the following syntax:
|
|
|
+
|
|
|
+```html
|
|
|
+<template x-for="(item, index, collection) in items" :key="index">
|
|
|
+ <!-- You can also reference "collection" inside the iteration if you need. -->
|
|
|
+ <!-- Current item. -->
|
|
|
+ <div x-text="item"></div>
|
|
|
+ <!-- Same as above. -->
|
|
|
+ <div x-text="collection[index]"></div>
|
|
|
+ <!-- Previous item. -->
|
|
|
+ <div x-text="collection[index - 1]"></div>
|
|
|
+</template>
|
|
|
+```
|
|
|
+
|
|
|
> Note: `x-for` must have a single element root inside of the `<template></template>` tag.
|
|
|
|
|
|
> Note: When using `template` in a `svg` tag, you need to add a [polyfill](https://github.com/alpinejs/alpine/issues/637#issuecomment-654856538) that should be run before Alpine.js is initialized.
|