微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

当我在 v-for 中设置它时,我无法访问我的 ref

如何解决当我在 v-for 中设置它时,我无法访问我的 ref

我有其他可以访问的 ref,但是当我在 v-for 中设置我的 ref 并尝试访问它时,它返回 undefined。我已经阅读了 vue 文档并尝试了在 stackoverflow 中发布的许多可能的解决方案,但似乎没有一个我有用。

即使我使 ref 唯一,仍然返回 undefined。

:ref="`hexagon${rowNum}${xShapeIndex}`"

<template lang="pug">
  div(ref="container")  
      v-stage(:config="stageConfig" ref="stage")
        v-layer 
          //- rowNum starts at 1          
          div(
            v-for="rowNum in numberOfRows"
            :key="rowNum"
            )
            div(
              v-for="(service,xShapeIndex) in filteredServices.slice((rowNum - 1) *          
                         numberOfXShapes,rowNum * numberOfXShapes)"
              )
              v-regular-polygon(
                ref="hexagon"
                @mouseenter="isHovering = true"
                @mouSEOut="isHovering = false"
                @click="redirectToEnvView(service)"
                :config="polygonConfig(service,xShapeIndex,rowNum - 1)"
                )

mounted() 
      //hexagon animation
      const period = 5000;
      // in ms

      const vm = this
      vm.$nextTick(()=> 
        console.log(vm.$refs.container) // OK,returns somthing
        console.log(vm.$ref.stage) // OK,returns something
        console.log(vm.$refs.hexagon) //return undefined 
      )
     

    },

enter image description here

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。