core: Template Refs in v-for not working

Version

3.2.31

Reproduction link

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

About this issue

Original URL
State: closed
Created 2 years ago
Reactions: 3
Comments: 37 (14 by maintainers)

Links to this issue

javascript - Vue.js ref inside the v-for loop - Stack Overflow

Commits related to this issue

chore: remove no longer present V_FOR_REF compat entry close vuejs/v3-migration-guide#10 — committed to vuejs/core by yyx990803 2 years ago
fix(runtime-core/template-ref): named ref in v-for regression fix (#5118) close #5116 close #5447 close #5525 — committed to vuejs/core by lidlanca 2 years ago

Most upvoted comments

@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

lidlanca on Mar 8, 2022

Workaround works 👍🏼 Looking forward to bug fix. Tx

calebwaldner on Mar 25, 2022

nothing is working and gives me headache omg. The value of ref, no matter what i do (skip unwrap, binding with function and push), is a proxy and I can’t access anything. When i try to access with myArray.value[0], it gives undefined

flora-le on Feb 15, 2023