Template Refs in v-for not working

Version

3.2.31

Reproduction link

stackblitz.com

Steps to reproduce

Open the DevTools and look at the console.logs from onMounted. You now see three logs, each representing a different template Ref. Log one and three are a single template ref and an array filled with function refs. They are working fine as expected. The issue is that the second ref is not returning an array of elements from the v-for but stays empty as initialized.

What is expected?

Template Ref on the v-for should be a DOM NodeList or an Array of DOMElements

What is actually happening?

The initialized ref([]) stays empty

[lidlanca]

@LinusBorg ignore this

The Ref are not normalized to even hit the fix code path that was due to a : binding on the ref when I tested.

The PR does indeed fix this issue for dev mode!

A possible workaround for the current limitation is:

<script setup>
import { ref, computed, onMounted } from 'vue';

//escapse template unwrapping
const skipUnwrap = { el: ref([]) };
// for convenience
let el = computed(() => skipUnwrap.el.value);

onMounted(() => {
  console.log(el.value);
});
</script>

<template>
  <div>
    <div v-for="i in 'hello'" :key="i" :ref="skipUnwrap.el">{{ i }}</div>
    Total Refs: {{ el.length }}
  </div>
</template>

https://stackblitz.com/edit/vitejs-vite-jfeskg?file=src/App.vue

[calebwaldner]

Workaround works 👍🏼 Looking forward to bug fix. Tx