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

最新推荐文章于 2024-09-24 10:45:05 发布

小狗不吃辣条

最新推荐文章于 2024-09-24 10:45:05 发布

阅读量1.4k

点赞数 3

文章标签： vue js

本文链接：https://blog.csdn.net/m0_61280181/article/details/137219209

版权

本文讲述了在Vue3中从数据库查询数据并渲染到页面时遇到关于`getBoundingClientRect()`的TypeError，解决方法是通过`document.getElementById(DivShow)`获取元素再调用该方法。

摘要由CSDN通过智能技术生成

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

解决方法：

使用document.getElementById("DivShow")调用getBoundingClientRect()

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

小狗不吃辣条

关注关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

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 () {

微信小程序自定义组件boundingClientRect取不到值

Pan Fengshan的博客

03-17

1万+

一、问题场景有些场景下，我们需要在小程序自定义组件中获取某些元素的高度，代码如下： ready: function() { wx.createSelectorQuery().select('.search-content').boundingClientRect(rect=>{ console.log(rect.height) }).exec(); } ...

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

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

vue3+uniapp 获取boundingClientRect信息

最新发布

qq_38727224的博客

09-24

162

【代码】vue3+uniapp 获取boundingClientRect信息。

getBoundingClientRect 获取的数据不正确

qq_42704945的博客

08-04

5825

然后组件就定位到了和容器组件一样的位置。需要帮这个容器组件定位到我图上的位置我还需要获取tooltip组件的大小还做运算。我在实现一个tooltip组件的时候需要在鼠标移入的时候获取当前trigger容器的位置以及tooltip组件的位置。像这样我获取这个容器的位置大小使用getBoundingClientRect这个函数是没有任何问题的数值都是准确的。问题就出现了我获取的tooltip的大小比实际的大小要小一些。解决问题我们把获取的数值除以这个scale()数值=》tooltip真实的大小了。

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

清晰编程

05-13

783

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

$(".shop-car").getBoundingClientRect()报错函数不存在

qq_41820599的博客

01-06

701

我安装了jq，但是(".shop−car").getBoundingClientRect()总是这样报错，后来通过别人的帮助改成了(".shop-car").getBoundingClientRect()总是这样报错，后来通过别人的帮助改成了(".shop−car").getBoundingClientRect()总是这样报错，后来通过别人的帮助改成了(".shop-car")[0].getBou...

vue3项目模板，开箱即用（附源码）

yml15180824993的博客

05-30

1281

一个开箱即用的Vue 3项目模板，涵盖从项目创建到配置的全流程。通过使用Vue CLI生成项目，安装和配置常用的开发工具和库，包括Sass、Element Plus、Axios等。详细的代码示例展示了如何封装Axios请求、实现自动导入、管理API、配置跨域请求以及进行图片懒加载和自适应布局。此外，本文还介绍了如何在项目中使用AOS动画库，增添动效。

vue中的一些知识

zy的博客

01-26

1114

v-model 多用于表单元素实现双向数据绑定 v-for 格式： v-for="（item,index) in/of 数组json" 循环数组或json v-show 显示内容 ,通过display=block/none来控制元素隐藏出现 v-hide 隐藏内容同上 v-if 显示与隐藏（dom元素的删除添加同angular中的ng-if 默认值为false） v-else-if 必须和v-if连用 v-else 必须和v-if连用不能单独使用否则报错模板编译错误 v-bind

记vue分步引导的坑 driver.js 与 vue-tour html2canvas 与 dom-to-image

weixin_39520640的博客

03-22

3265

由于项目需要加入用户指引，于是我就找了下相关的插件。一开始使用driver.js做了个demo感觉还是不错的，于是就准备使用driver.js，修改下样式就行了。但是真正用设计图来设置时却发现了问题，由于项目是用vue编写的，根据设计图拆分了很多可复用的组件。设计图中很多需要高亮的dom节点都是在好几个组件之下的，driver.js获取不到，而且部分dom高亮时只有一个白色的框框覆盖，整了两天发现搞不定于是准备换插件。在帖子上看到有人使用vue-tour插件，缺点是他的高亮跟没高亮一样，完全看不出来，但

vue学习

希望我快乐

06-11

824

1. 安装node，直接官网下载安卓即可，会自动安装上npm。网址：https://nodejs.org 2. 检测node是否安装成功，在终端输入：node -v 以及 npm -v，若有版本信息，则安装成功。 3. 全局安装cli3 npm install -g @vue/cli vue -V(大写) 查看vue版本信息，若有信息则安装成功。 4. cd到工作目录，使用vue ui可视化创建...

【JS中树结构的动态构建】：JSON数据到树状结构的快速搭建

[【JS中树结构的动态构建】：JSON数据到树状结构的快速搭建](https://www.mongodb.com/community/forums/uploads/default/original/3X/9/7/97e4ec0a57de751fae6211d503f66a984c67ace5.png) # 1. JS中树结构的重要性...

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

热门推荐

小划乐的博客

02-21

2万+

点击input获取该元素位置一开始使用 ref 获取dom元素，然后调用getBoundingClientRect()方法 <div @click="getInput" > <Input type="text" readonly="readonly" ref="inputDom"></Input> </div&

Firefox在含有flash的网页上提示：不建议使用 getBoxObjectFor() 。请使用 element.getBoundingClientRect()。

greenerycn的专栏

10-25

1402

在一个含有Flash的网页中插入Flash会提示：警告：不建议使用 getBoxObjectFor() 。请使用 element.getBoundingClientRect()。经本人测试，确实是Firefox在含flash的网页上提示，还不知道原因，也没找到解决办法。Firefox版本：3.0.3Flash: 10.0html页面代码：html>body>object type="appl

getBoundingClientRect().top 获取到的值不正确

lala1091的博客

04-08

3778

问题：在页面里获取到的是正确的，放到js里就获取不到了解决方法：把方法放在 window.onload = () => {} 里原因：因为页面还没有加载完，就开始获取top值了

getBoundingClientRect在IE9/10里的bug

weixin_34357928的博客

12-20

155

getBoundingClientRect可以获得页面中某个元素的左，上，右和下分别相对浏览器视窗的位置，最早在IE中实现，后其它浏览器均已实现。但它在IE9,10中有个bug，当出现垂直滚动条时，获取top总为0。其它浏览器则能正常获取。代码如下 <!DOCTYPE html> <html> <head> <meta char...

uniapp结合vue3获取元素节点的问题小结

weixin_74773902的博客

04-12

799

给元素添加ref,在vue2是用this.$ref.变量名称就获取到了，大家都熟的不能再熟，vue3是没有了this,只能先声明变量利于 const tab = ref(null) ，获取在页面挂载后.value就能获取，但是我在小程序死活都拿到的null,后来上网查阅资料才发现拿不到，是跟环境有关系，由于小程序环境的限制，不能直接在setup函数内部使用ref来获取DOM元素，因为小程序的视图层是由小程序框架管理的，而不是浏览器的DOM。

IE浏览器下DOM节点被替换后获取边界offsetParent / getBoundingClientRect 的BUG解决(版本 EXT 2.0/ 2.0.1)...

weixin_30439031的博客

06-24

130

BUG 症状:拖动分割栏或resize的时候,出现"未指明的错误" 1.打开ext-base.js2. 找到getBoundingClientRect()3.替换为 //thisisfromtheminifiedversiontry{M=G.getBoundingClientRect();N=C(document).getScroll();return[M.left+N.left,...

【Vue3】vue3通过ref获取元素离顶部的距离

此人太懒，没有任何简介

12-20

7476

vue3通过ref获取元素离顶部的距离