Vue does not get template ref of vNode-rendered elements array with v-for

Question

I'm creating a library and I do renderless components that just renders whatever is in slots. For the purpose of demonstration, I added dummy VNodes array instead.

<template>
    <component
      v-for="vnode of vnodes"
      :key="vnode.toString()"
      :is="vnode"
      ref="elements"
    />
</template>

<script setup>
import { ref, h, onMounted } from "vue";

const elements = ref([]);

const vnodes = [
  h(
    "div",
    {
      class: "foo"
    },
    "Hello One!"
  ),
  h(
    "div",
    {
      class: "bar"
    },
    "Hello Two!"
  )
];

onMounted(() => {
  console.log(elements.value[0]); 
// expected: First element of array (Element)
// reality: undefined
});
</script>

CodePen repro

In my use case, I fetch VNodes from slots and then rendering it via <component> in template. It renders properly, however I can't get the references to rendered elements at onMounted(). Does anyone know what's wrong with this approach, or is it a Vue bug?

So I've tried exactly the code you provided in exactly the version you mentioned and it works just fine (I used sfc.vuejs.org for testing it). Are you sure the error is not due to the fetch of the nodes? — h0p3zZ
– h0p3zZ, Commented Apr 25, 2022 at 13:31
Yeah I'm trying it in SFC vuejs and it's working. Weirdly, in CodePen it's not (they are using the latest one, 3.2.31) — Jojko
– Jojko, Commented Apr 25, 2022 at 13:44
Did the provided answer help? or are you still looking for a solution? — h0p3zZ
– h0p3zZ, Commented Apr 26, 2022 at 11:05

VarChar42 · Accepted Answer · 2022-04-26 10:40:28Z

1

I have tried it in codepen and I also think this is how you should do it in vue 3. (best practice as of Vue.js version 3)

Functional Template Refs

:ref="(el) => elements.push(el)"

instead of

ref="elements"

If you face issues with duplicates in the array you might have to reset the array in a vue lifecycle hooks

edited Apr 26, 2022 at 10:40

VarChar42

8154 silver badges14 bronze badges

answered Apr 25, 2022 at 13:46

h0p3zZ

7374 silver badges21 bronze badges

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

4 Comments

Martin Zeltin Over a year ago

This will create duplicate elements on each update cycle.

h0p3zZ Over a year ago

@MartinZeltin as stated in the last part of sentence, you have to reset the array in a lifecycle hook.

Martin Zeltin Over a year ago

If you have a unique id or index available you can also do this to avoid duplication :ref="(el) => myElements[id] = el"

h0p3zZ Over a year ago

@MartinZeltin you could edit my answer so it's included and I'm not pretending it is my answer (or my edit) :D

Collectives™ on Stack Overflow

Vue does not get template ref of vNode-rendered elements array with v-for

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related