Leptos using NodeRef in an x*y Grid

135 views Asked by At

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.

0

There are 0 answers