Vue中v-for循环内模板引用在子组件中显示undefined问题

问题根源 #

直接在v-for内的元素上绑定ref="templateRefArray"时，Vue会把所有匹配的DOM元素追加到数组中，但数组索引和v-for的循环索引不一定严格对应；更关键的是组件初始化渲染阶段，模板引用还未完成赋值，此时模板中访问templateRefArray[idx]会拿到undefined，后续控制台能看到数组填充是因为组件挂载后ref才完成赋值。

解决方案 #

1. 改用函数式绑定ref，确保DOM元素对应正确索引

把原来的静态ref绑定改成动态函数式绑定，手动将每个DOM元素赋值到数组的对应位置：

<a href="JavaScript:void(0);" title="test" :ref="el => { if (el) templateRefArray[idx] = el }" @click="foobar">
  <div>
    <iconComponent icon="ellipsis-vertical" />
  </div>
</a>

这里用:ref传入函数，当DOM挂载时会把元素实例el传入，判断el存在时（避免卸载时的null值），将其赋值到templateRefArray的idx位置，保证索引和v-for循环索引完全匹配。

2. 确保在ref赋值完成后使用（可选）

如果子组件依赖该DOM元素初始化，可以在组件挂载后再处理，或者用onMounted监听：

<script setup>
import { ref, onMounted } from 'vue'
const templateRefArray = ref([])

onMounted(() => {
  // 组件挂载后，ref数组已填充完成，可在此访问或处理
  console.log(templateRefArray.value)
})
</script>

3. 修正模板访问逻辑（可选）

模板中Vue会自动解包ref，所以templateRefArray[idx]写法没问题，但如果存在渲染延迟，可以结合v-if确保元素存在后再渲染子组件，或者在事件中用nextTick等待ref更新：

<script setup>
import { ref, nextTick } from 'vue'
const foobar = async () => {
  await nextTick()
  // 确保ref已更新后再操作
  console.log(templateRefArray.value[idx])
}
</script>

完整修正代码示例 #

<div v-for="(item, idx) in items" :key="idx">
    <div>
      <div>
        <a href="JavaScript:void(0);" title="test" :ref="el => { if (el) templateRefArray[idx] = el }" @click="foobar">
          <div>
            <iconComponent icon="ellipsis-vertical" />
          </div>
        </a>
      </div>

      <p>TEST {{ templateRefArray.length }} {{ templateRefArray[idx] }}</p>
      <template v-if="templateRefArray[idx]">
        <childComponent v-model:someModelStuff="someModelStuff" :wrapperElement="templateRefArray[idx]" @select="foobar2">
        </childComponent>
      </template>
    </div>
</div>

<script setup>
import { ref, onMounted } from 'vue'
// 示例数据源
const items = ref([1, 2, 3])
const templateRefArray = ref([])
const someModelStuff = ref({})

const foobar = () => {
  // 点击逻辑
}

const foobar2 = () => {
  // 选择逻辑
}

onMounted(() => {
  console.log('挂载后ref数组:', templateRefArray.value)
})
</script>

内容的提问来源于stack exchange，提问作者temp