赞
踩
这是代码结构
- <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
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。