I have a grid that has x * y
number of inputs (that also can change over time).
I want to have NodeRefs
(since I only need to read the values on submit()
of the form.)
My Idea was a Vec<Vec<NodeRef<Input>>
making it two dimensional to iterate over like this (columns and rows are ReadSignal<i32>
).
let input_elements: Vec<Vec<NodeRef<Input>>> = (0..rows.get())
.map(|_| {
(0..columns.get())
.map(|_| create_node_ref::<Input>())
.collect::<Vec<NodeRef<Input>>>()
})
.collect();
Then using <For\>
to create those inputs with the refs:
<For
each=move | (0..rows.get()).into_iter()
key=|counter| *counter
children=move |id| {
view! {
<Column
columns=columns.clone()
input_elements=input_elements.get(id as usize).unwrap().clone()
/>
}
}
/>
/>
Equivalent using a Column
component:
fn Column(columns: ReadSignal<i32>, input_elements: Vec<NodeRef<Input>>) -> impl IntoView {
view! {
<For
each=move || (0..columns.get()).into_iter()
key=|counter| *counter
children=move |id| {
view! {
<input
node_ref=input_elements.get(id)
type="number"
/>
}
}
/>
}
}
This unfortunately doesn't build, but doesn't throw me an error either. Which is why I'm currently not really knowing where I'm going wrong/what info I'm missing.
Here's a codesandbox that doesn't work.