How can I get an HTML Element using ref in v-for?

[Vivi-Ornitier]

I want to get an HTML Element with v-for.

<script setup lang="ts">
const exampleRef = ref([]);

onMounted(() => {
  console.log(pinsRef.exampleRef[0]);
});
</script>

<template>
  ...
  ...
  <Field
    v-for="index in 6"
    ref="exampleRef"
    :key="index"
    v-slot="{ field, meta }"
    :name="`example-${index}`"
    rules="required"
  >
    <input-examaple type="text" :field="field" :meta="meta" />
  </Field>
</template>

But what I got was a Proxy object.

How can I get an HTML Element using ref in v-for?

[logaretm]

Field exposes a public API that doesn't include the $el because it may not exist depending on what is being rendered. In your case if $el was ever exposed it will be undefined since you are using a scoped slot.

You should ref your slotted elements instead of the field component.