当前位置:   article > 正文

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

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

这是代码结构

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

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

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

解决:

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

用nextTick再调用一次

  1. onMounted(() => {
  2. getPassInfo()
  3. nextTick(()=> getPassInfo())
  4. })

 完美解决~

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

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/AllinToyou/article/detail/294633
推荐阅读
相关标签
  

闽ICP备14008679号