Vue3中v-for遍历props数据时模板refs为null的解决办法

问题原因 #

onMounted钩子执行时，父组件传入的data props可能尚未完成传递或更新（比如父组件异步获取数据后才传入），此时子组件的v-for还未渲染出DOM元素，因此useTemplateRef返回的refs数组为null。

解决方案 #

1. 监听props数据变化，就绪后获取refs #

通过watch监听data props的变化，确保数据存在且有效时再访问refs：

<template>
  <div ref="items" v-for="(item, index) in data" :key="index">{{ item }}</div>
</template>

<script setup>
import { defineProps, watch, useTemplateRef } from 'vue'

const props = defineProps({ data: Array })
const items = useTemplateRef('items')

// 监听data变化，数据就绪时打印refs
watch(() => props.data, (newData) => {
  if (newData?.length) {
    console.log(items.value)
  }
}, { immediate: true }) // 立即执行一次，处理初始传入的同步数据
</script>

2. 用nextTick等待DOM更新完成 #

如果父组件是同步传递数据，可在onMounted中通过nextTick等待DOM渲染完成后再访问refs：

<template>
  <div ref="items" v-for="(item, index) in data" :key="index">{{ item }}</div>
</template>

<script setup>
import { defineProps, useTemplateRef, onMounted, nextTick } from 'vue'

const props = defineProps({ data: Array })
const items = useTemplateRef('items')

onMounted(async () => {
  await nextTick() // 等待v-for渲染的DOM更新完成
  console.log(items.value)
})
</script>

3. 手动收集refs（兼容式方案） #

若useTemplateRef仍有问题，可手动创建ref数组，通过ref回调函数收集DOM元素：

<template>
  <div 
    v-for="(item, index) in data" 
    :key="index" 
    :ref="el => el && (items[index] = el)"
  >{{ item }}</div>
</template>

<script setup>
import { defineProps, ref, onMounted, watch } from 'vue'

const props = defineProps({ data: Array })
const items = ref([])

// 数据更新时重置refs数组
watch(() => props.data, () => {
  items.value = []
}, { immediate: true })

onMounted(async () => {
  await nextTick()
  console.log(items.value)
})
</script>

核心总结 #

本质是要确保v-for依赖的数据源已就绪且对应的DOM元素已渲染完成，再去访问模板refs。根据父组件数据传递的时机（同步/异步），选择对应的等待方式即可。

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