mirror of
https://github.com/leptos-rs/book.git
synced 2025-12-27 11:06:43 -05:00
Documented <ForEnumerate/> component
This commit is contained in:
@@ -297,3 +297,30 @@ fn main() {
|
|||||||
|
|
||||||
</details>
|
</details>
|
||||||
</preview>
|
</preview>
|
||||||
|
|
||||||
|
### Accessing an index while iterating with `<ForEnumerate/>`
|
||||||
|
|
||||||
|
For the cases where you need to access the real-time index while iterating,
|
||||||
|
Leptos provides a `<ForEnumerate/>` component.
|
||||||
|
|
||||||
|
The props are identical to the `<For/>` component, but when rendering `children`
|
||||||
|
it additionally provides a `ReadSignal<usize>` parameter as the index:
|
||||||
|
|
||||||
|
```rust
|
||||||
|
#[derive(Copy, Clone, Debug, PartialEq, Eq)]
|
||||||
|
struct Counter {
|
||||||
|
id: usize,
|
||||||
|
count: RwSignal<i32>
|
||||||
|
}
|
||||||
|
|
||||||
|
<ForEnumerate
|
||||||
|
each=move || counters.get() // Same as <For/>
|
||||||
|
key=|counter| counter.id // Same as <For/>
|
||||||
|
// Provides the index as a signal and the child T
|
||||||
|
children={move |index: ReadSignal<usize>, counter: Counter| {
|
||||||
|
view! {
|
||||||
|
<button>{move || index.get()} ". Value: " {move || counter.count.get()}</button>
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
```
|
||||||
|
|||||||
Reference in New Issue
Block a user