欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

“TypeError: that.$refs.videoItem.getBoundingClientRect is not a function“

程序员文章站 2024-01-31 08:39:25
...

获取节点距顶部高度时使用 getBoundingClientRect() 方法报错:
vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in nextTick: “TypeError: that.$refs.videoItem.getBoundingClientRect is not a function”
“TypeError: that.$refs.videoItem.getBoundingClientRect is not a function“

搜到的都是在说需要在销毁阶段要取消监听scroll,我这个并不是,仔细看了下导致找不到的原因发现是我给的组件ref导致的。组件 .$refs 拿到的是VueComponent,加个 .$el 就能拿到了

<vVideoItem ref="videoItem"></vVideoItem>
<div ref="aa"></div>
  mounted() {
    this.$nextTick(()=>{
      let itemH= this.$refs.videoItem.$el.getBoundingClientRect().top;
      console.log(itemH);
      window.addEventListener('scroll', this.handleScroll);
      
      // let aa= this.$refs.aa.getBoundingClientRect().top;
      // console.log(aa);
    })
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.handleScroll)
  },
相关标签: vue vue