Vue 3, Typescript: How do I pass parameters to template refs?

Question

From Template

<input v-for="i in 5" :key="i" :ref="refHandler($el, i)" />

From setup()

const refHandler = (el: HTMLInputElement, i: number) => {
  if (el) inputs.value[i] = el;
};

el seems to show as null. How do I pass parameters to template refs?

tony19 · Accepted Answer · 2021-10-16 08:01:15Z

1

Your ref binding in the template should be a function that declares its argument as $el for it to be defined in your callback:

                                      👇
<input v-for="i in 5" :key="i" :ref="$el => refHandler($el, i)" />

answered Oct 16, 2021 at 8:01

tony19

140k24 gold badges281 silver badges354 bronze badges

Sign up to request clarification or add additional context in comments.

1 Answer 1