mirror of
https://github.com/leptos-rs/book.git
synced 2025-12-27 07:35:38 -05:00
Added let syntax and linked docs.rs
This commit is contained in:
@@ -301,9 +301,9 @@ fn main() {
|
||||
### 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.
|
||||
Leptos provides a [`<ForEnumerate/>`](https://docs.rs/leptos/latest/leptos/control_flow/fn.ForEnumerate.html) component.
|
||||
|
||||
The props are identical to the `<For/>` component, but when rendering `children`
|
||||
The props are identical to the [`<For/>`](https://docs.rs/leptos/latest/leptos/control_flow/fn.For.html) component, but when rendering `children`
|
||||
it additionally provides a `ReadSignal<usize>` parameter as the index:
|
||||
|
||||
```rust
|
||||
@@ -319,8 +319,19 @@ struct Counter {
|
||||
// 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>
|
||||
<button>{move || index.get()} ". Value: " {move || counter.count.get()}</button>
|
||||
}
|
||||
}}
|
||||
/>
|
||||
```
|
||||
|
||||
or it could also be used with the more convenient `let` syntax:
|
||||
```rust
|
||||
<ForEnumerate
|
||||
each=move || counters.get() // Same as <For/>
|
||||
key=|counter| counter.id // Same as <For/>
|
||||
let(idx, counter) // let syntax
|
||||
>
|
||||
<button>{move || idx.get()} ". Value: " {move || counter.count.get()}</button>
|
||||
</ ForEnumerate>
|
||||
```
|
||||
|
||||
Reference in New Issue
Block a user