Subscribe on changes!

Template Refs in v-for not working ( again )

avatar
Jun 1st 2022

Vue version

@vue/cli 5.0.1

Link to minimal reproduction

https://vuejs.org/guide/essentials/template-refs.html#refs-inside-v-for

Steps to reproduce

<template lang="pug">

  my_comp(
   v-for=" i in ls "  
      ref=" itemRefs "
  )
  button(@click=" get_refs ")

<script setup>

import { ref } from 'vue'

var itemRefs = ref( [] )

function get_refs ()
{
  console.log(itemRefs.value)
}

What is expected?

list of components refs

What is actually happening?

[]

System Info

System:
OS: Linux 5.18 Arch Linux
CPU: (32) x64 AMD Ryzen 9 5950X 16-Core Processor
Memory: 50.21 GB / 62.78 GB
Container: Yes
Shell: 5.1.16 - /bin/bash
Binaries:
Node: 18.2.0 - /usr/bin/node
Yarn: 1.22.19 - /usr/bin/yarn
npm: 8.5.5 - /usr/bin/npm
Browsers:
Chromium: 102.0.5005.61

Any additional comments?

wrapping is nice workaround, but components are still undefined inside, have to use div instead

  div(
    v-for=" i in  ls  " :ref=" skipUnwrap.itemRefs "
  )
    plot(
      :x_axis=' ts '
      :y_axis= ' i '
)
var itemRefs = ref( [] )
var skipUnwrap = { itemRefs }
avatar
Jun 1st 2022

Please provide a runnable reproduction. It should be able to do on sfc.vuejs.org or stackblitz, both linked from within the issue form.