Vue3 v-for绑定的dom获取ref为undefined

这是代码结构

<div class="playerInfo" 
    v-for="(item, index) in data.playersInfo" 
    :key="index" 
    :ref="el => {if(el)playersRef[index] = el}"
    :style="`left:${item.position[0]};top:${item.position[1]}`"
    @click="playerPassHighLight(index)"
>
    <div class="player-name" style="margin-bottom: 5px;">
        {{ item.nameCn }}
    </div>
    <div class="player-avatar">
       <img :src="item.img" alt="" style="width: 60px; height:60px; border-radius: 30px;" />
    </div>
</div> 

然后在console.log(playersRef.value, playersRef.value[0])的时候出现：

playersRef.value有数据，但是playersRef.value[0]为undefined

解决：

参考关于VUE中v-for循环的dom使用ref获取不到问题-CSDN博客

用nextTick再调用一次

onMounted(() => {
   getPassInfo()
   nextTick(()=> getPassInfo())
})

 完美解决~

 P.S. 如果把方法放到updated里面会一直请求数据，就没用updated