这是代码结构
<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