Uncaught TypeError: this.$refs.scorll_top.getBoundingClientRect is not a function at VueComponent

最新推荐文章于 2025-04-17 10:56:29 发布

原创最新推荐文章于 2025-04-17 10:56:29 发布 · 1.8k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html #html5

在Vue应用中遇到一个错误：`TypeError:this.$refs[refName].getBoundingClientRect is not a function`。问题出在尝试从Vue组件的ref获取getBoundingClientRect方法时。解决方法是将ref直接绑定到HTML原生标签上，而不是Vue组件，然后就可以正确调用getBoundingClientRect().top。确保ref的引用指向的是具有该方法的正确DOM元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue中使用getBoundingClientRect()获取元素位置报错
首先，这个是报错信息
问题：““TypeError:this.$refs[refName].getBoundingClientRect is not a function””
在这里插入图片描述
我的ref是这样写的。
将ref定义在组件上面再使用如下代码去获取其方法获取其top，就会报错

解决办法：
将ref写在原生的html标签上再使用其方法去获取top，就不会报错

再使用就好了。

this.$refs.QZBLGZH.getBoundingClientRect().top

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

不完美女孩-

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

vue2/3 - 报错Uncaught TypeError: (0 , vue__WEBPACK_IMPORTED_MODULE_0__.defineComponent) is not a funct

高级前端工程师

07-02

2132

vue2，vue3，router，路由，报错，vue-router，vue报错Uncaught TypeError: (0 , vue__WEBPACK_IMPORTED_MODULE_0__.defineComponent) is not a function，解决vue错误，vue3 router报错Uncaught TypeError，如何解决这个报错，vue报错，vue运行报错，vue编译，vue项目启动时报错，页面白屏，解决vue引入模块时的报错，vue路由报错，vue-router引入失败且页面

vue 使用getBoundingClientRect() 获取元素位置报错

weixin_43376571的博客

06-01

1万+

vue 使用getBoundingClientRect() 获取元素位置报错Uncaught TypeError: Cannot read property ‘getBoundingClientRect’ of undefined 在mounted生命周期注册事件 mounted () { window.addEventListener('scroll', this.handleScroll, true) } 在methods里面监听使用 handleScroll () {

参与评论您还未登录，请先登录后发表或查看评论

深入探讨 TypeError: _a2.getBoundingClientRect is not a function 错误及解决方案

x3185860295的博客

12-07

3701

重要的是要理解错误背后的实际含义，即尝试对非DOM对象调用了DOM方法，然后针对性地调整代码结构或环境设置。随着前端技术的发展，新的挑战不断涌现，同时也带来了更多的解决方案。持续学习和实践是每一位开发者成长的关键。组件并且没有将其设置为按钮式，或者在其内部未找到其他可以作为触发器的DOM节点时，可能会出现上述错误。在Web开发中，我们经常会遇到各种各样的错误，其中一些可能是由于特定的框架或库的行为引起的。本文将深入分析该问题的原因，并提供一系列有效的解决方法。方法，从而导致错误抛出，影响其他组件的渲染。

Vue获取元素位置 getBoundingClientRect is not a function

最新发布

weixin_55800388的博客

04-17

300

【代码】使用Element时报错-TypeError: _a2.getBoundingClientRect is not a function。

panelRef.value.getBoundingClientRect is not a function

weixin_43951592的博客

02-26

657

vue3 ref报错

修复vue3项目中，使用 antv x6 dnd拖拽插件在将节点拖动到画布上是报elem.getBoundingClientRect is not a function错误的问题

专注于编程智能体和AI原生开发领域的分享

05-13

1060

在初始化dnd插件的时候，将dndContainer属性去掉就可以了。估计是我dndContainer取值不对造成的。欢迎关注公众号：清晰编程，获取更多精彩内容。

Vue 报错TypeError: this.$set is not a function 的解决方法

10-17

然而，当你遇到`TypeError: this.$set is not a function`的错误时，通常是因为`this`上下文没有正确指向Vue实例。下面我们将深入探讨这个问题及其解决方案。 ### 报错场景在开发过程中，你可能在尝试将API获取的...

为什么有这个bug：Uncaught TypeError: this.$parent.hello is not a function

weixin_40945354的博客

11-04

268

为什么有这个bug <!DOCTYPE html> <html> <div id="app"> <child></child> </div> <script src="https://unpkg.com/vue@next"></script> <script> const app = Vue.createApp({});

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

weixin_45503820的博客

09-17

2892

获取节点距顶部高度时使用 getBoundingClientRect() 方法报错： vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in nextTick: “TypeError: that.$refs.videoItem.getBoundingClientRect is not a function” 搜到的都是在说需要在销毁阶段要取消监听scroll，我这个并不是，仔细看了下导致找不到的原因发现是我给的组件ref导致的。组件 .$refs 拿到的是VueC

vue中使用getBoundingClientRect()获取元素位置报错

艾丽的博客

01-04

1万+

“TypeError:this.$refs[refName].getBoundingClientRect is not a function” <el-row class="qzblgzhTable" ref="QZBLGZH"></el-row> 报错原因将ref定义在组件上面再使用如下代码去获取其方法获取其top，则会报错 this.$refs.QZBLGZH.getBoundingClientRect().top 正确写法 <div ref="QZ

解决Uncaught (in promise) TypeError: Object(...) is not a function报错

老电影故事的博客

04-28

1万+

今天搬砖的时候遇到一个报错问题： Uncaught (in promise) TypeError: Object(…) is not a function 如图所示原因：经过排查，发现原因是导入的JS方法没有用大括号接收，然后又把它当做方法调用了。低级错误解决方法：导入的js方法要用大括号接收： import {callMethodLimitPage} from './getAllData.js' ...

vue3动态获取数据时使用getboundingclientrect()无效

m0_61280181的博客

04-01

2234

在vue3中，当数据重数据库查出渲染到页面上时想要获取相关html标签位置信息时报错：TypeError: Cannot read properties of null (reading 'getBoundingClientRect'使用document.getElementById("DivShow")调用getBoundingClientRect()

getBoundingClientRect 函数

weixin_34267123的博客

08-22

215

【vue3常见报错5】Uncaught (in promise) TypeError: xxx is not a function

朱远辉的博客

05-19

1万+

【vue3常见报错5】Uncaught (in promise) TypeError: xxx is not a function：检查是否正确导入函数或模块。确认传递参数的类型和数量与函数定义相匹配。确认参数值不为null或undefined。

ERROR Error: Uncaught (in promise): TypeError: undefined is not a function

叮咚侠的博客

04-25

7943

angular 配置了懒加载之后，使用 ng s启动，点击路由跳转到懒加载模块的时候，出现如下错误： core.js:1673 ERROR Error: Uncaught (in promise): TypeError: undefined is not a function TypeError: undefined is not a function at Array.map (<anonymous>) at webpackAsyncContext ($_lazy_route...

js 函数报错“Uncaught: TypeError xxx is not a function”

flyingfishzxf的专栏

07-07

3484

写ajax函数时，遇到这样的错误首先看看标签属性中有没有与函数名相同的属性名比如：函数名为create_user() 属性id="create_user" 或者属性 name="create_user"那么就会导致这样的报错，只要把属性名改成其他与函数不一样的名称或者删掉就可以了

Uncaught (in promise) TypeError: Object(...) is not a function 解决方案

qq_17627195的博客

11-11

8883

原因：出现这个原因，有两个情况。

报错Error: Uncaught (in promise) TypeError: Object(...) is not a function at eval

weixin_44470633的博客

12-29

1957

解决Object(...) is not a function at eval报错问题

Uncaught TypeError: this.$emit is not a function

06-09

如果在 Vue 3 中使用 `this.$emit` 出现了 `Uncaught TypeError: this.$emit is not a function` 错误，通常是因为你的组件没有继承自 `Vue` 对象。在 Vue 3 中，组件的定义方式发生了变化。如果你使用 `defineComponent` 函数来定义组件，那么你需要将组件的选项传递给该函数，并将返回值作为组件的定义。例如： ```vue <script> import { defineComponent } from 'vue'; export default defineComponent({ methods: { handleClick() { this.$emit('child-click'); } } }); </script> ``` 在上述代码中，我们使用 `defineComponent` 函数来定义组件，并将组件的选项传递给该函数。这样，我们可以使用 `this.$emit` 来触发父组件中的事件。如果你没有使用 `defineComponent` 函数来定义组件，而是使用了 Vue 2 中的方式来定义组件，那么你需要将组件继承自 `Vue` 对象。例如： ```vue <script> import Vue from 'vue'; export default Vue.extend({ methods: { handleClick() { this.$emit('child-click'); } } }); </script> ``` 在上述代码中，我们使用 `Vue.extend` 方法将组件继承自 `Vue` 对象。这样，我们就可以在组件中使用 `this.$emit` 来触发父组件中的事件。