vue用js this.$refs.personTab.style.width 报错 'style' of undefined

最新推荐文章于 2023-04-19 23:14:05 发布
原创 最新推荐文章于 2023-04-19 23:14:05 发布 · 1.4k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了一个关于Vue中$refs引用出现undefined的问题及其解决方案。错误发生在尝试访问名为personTab的元素时，该元素在当前作用域下未被正确引用。文中提供了一段示例代码来展示如何检查$refs中的personTab是否已定义，并在此基础上进行样式修改。

错误处在 this.$refs.personTab中的personTab上面，personTab是undefined
解决

if(this.$refs.personTab){
this.$refs.personTab.style.width = width + "rem";
}
offsetWidth与style.width的区别
09-11
点击div 你就可以清楚的看到 offsetWidth和style.width的区别
js的 style.width 取不到元素的宽度值
weixin_30576859的博客
11-26 315
以前一直用jquery的.width()方法来获取一个元素的当前的宽度。不管该元素是否设置了宽度，CSS样式是内联、外联or内嵌，都可用此方式获得元素当前的宽度。 今天想用原生JS想获取一个元素宽度时，写document.getElementById("id").style.width或者document.getElementById("id").width都取不到值。。。 总结...
js style.width获取不到元素的宽度
Uncle_long的博客
05-25 2440
jquery用习惯了，用width()就能获取元素的宽度，但有些时候用js获取元素宽度获取不到，document.getElementById("id").style.width，原因：1.元素未设置宽度值2.元素设置了宽度值，但，设置在内联或外联样式表中，而非内嵌式的。虽然这种方式获取不到元素宽度，但是可以设置宽度 document.getElementById("id").style.widt...
vue动态渲染ref,获取this.$refs.xxx.style为undefined获取循环元素中的style
c_qianxia5040的博客
03-24 1628
获取是没问题的，本文遇到的是要获取循环列表中某一元素，并改变其样式。refs.name是一个数组，无法通过 .style 获取样式，设置ref在v-for列表上，直接获取this.refs.name[index]上设置样式。只能遍历这个this.
在vue中使用this.$refs.xx.style报错问题
qq_43506776的博客
12-03 6632
一个比较常见的场景：在一个弹窗打开的时候立刻通过this.$refs来获取内容就会出现xxx is undefined的错误 因为ref本身是作为渲染结果被创建的，在渲染的时候是不能访问的，因为他们还不存在！ 如果此时代码是需要这样来写代码，那么你可以在DOM渲染完毕后再进行获取 this.$nextTick(() => { this.$refs.name... //DOM渲染完毕后就能正常获取了 }) 转载自：在vue中使用refs总是报错undefined ...
vue拿到某个节点的属性_vue里的$refs属性要注意的点
weixin_29458017的博客
01-14 2097
vue里的$refs属性Vue的极大程度的帮助减少了对dom的操作，其中获取元素的方式主要通过添加ref属性，但是当获取this.$refs属性时，稍有不注意就会输出undefined导致我们对dom节点的操作报错。this.$refs.xxx为undefined的几种情况记录：在created里钩子函数中调用原因：created()在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据...
vue2 res this.$refs
08-15
在Vue组件中，可以使用`this.$refs.引用名字`来获取对应的引用。在方法中使用`this.$nextTick`可以确保在页面完全渲染完毕之后再调用方法。引用中给出了一个案例，展示了如何在父组件中通过`this.$refs`获取子组件的...
tempDiv.style.width = this.$refs.targetDom.width;
最新发布
12-05
### 可能存在的问题 #### 1. `this.$refs.targetDom` 未定义 在 Vue 中，`this.$refs` 用于访问子组件或 DOM 元素。如果 `targetDom` 没有正确绑定... this.$refs.tempDiv.style.width = `${width}px`; } } }; ```
this.$refs.myCanvas;this报错Object is possibly undefined
07-02
在 Vue.js 中使用 `this.$refs.myCanvas` 时，如果出现 `'Object is possibly undefined'` 的错误，通常是因为引用的对象未被正确绑定或访问时机不当。以下是可能导致该问题的几种情况及其对应的解决方法。 #### 1....
登录页面弹窗修改密码时，const formRef = instance.$refs.content.$refs.form;代码报错Uncaught (in promise) TypeError: Cannot read properties of undefined (reading '$refs')
07-12
首先，用户的问题是关于Vue Element UI登录弹窗中修改密码时出现的错误："Cannot read properties of undefined (reading '$refs')"，具体是instance.$refs.content.$refs.form报错。用户引用了几个参考，这些引用...
TypeError: this.$refs.multipleTable.recalculate is not a function
10-31
我们正在解决的是在使用el-table-tree-column时出现的 'TypeError: this.$refs.multipleTable.recalculate is not a function' 错误。 根据引用[1][2][3][4]中提供的线索，这类错误通常与引用（ref）的使用方式有关...
ref修改dom样式遇到的问题
weixin_62273462的博客
03-17 763
ref 与v-show和v-for
vue 子组件未渲染完成，通过refs调用报错，解决办法。
wcdunf的博客
04-19 2594
因此，如果你的操作需要在下一帧 DOM 更新之前就执行，可以使用。在 Vue 中，如果父组件调用子组件的方法时因为子组件未渲染完成而出现错误，一种解决方法是使用。直接调用子组件的方法，不过这种方法需要注意子组件是否已经渲染完成，否则可能会导致错误和异常。另外，如果你确定子组件已经渲染完成并且需要立即执行操作，也可以在父组件中使用。钩子函数来等待当前组件渲染完成后执行操作，然后在这个函数中使用。方法来等待子组件渲染完成后再调用子组件的方法。方法来等待子组件渲染完成后再进行操作。
Uncaught TypeError: Cannot read property 'style' of undefined这个bug的两种解决方法
热门推荐
tuzi007a的博客
05-03 3万+
一杯茶，一支烟，一个bug玩一天~~要哭了。总算处理掉这个bug了→_→ 出现bug的代码： for(var j = 0; j < rb3h_ul.children.length; j++) { rb3h_ul.children[j].addEventListener('mouseover', function() { for(var i = 0; i < rb3h_ul.chi...
this.$refs.XXX.$el.style 修改style样式
josiecici的博客
06-23 1万+
Vue获取动态样式的宽度
山外小楼
05-15 2万+
用vue 获取动态元素的宽度。首页，要放在this.$nextTick里面，其实要使用$el挂载此元素，下面贴代码 &lt;el-input auto-complete="off" v-model="company.companyName" ref="companyStyle"&gt;&lt;/el-input&gt;先定义一个ref=companyStyle，我们来获取此元素的宽度， new...
Vue获取元素的宽高
Hello World
08-02 1万+
获取元素 第一种：this.$refs 第二种：document.querySelector()等等 首先确保获取的元素不是undefined 或 null 等等 元素得在mounted()生命周期内才获取得到 获取元素的宽、高 （1）如果你元素有内联样式style=“width:100px;height:100px;” 则可以通过以下方式获取宽，高 this.refs.名称.style.width或this.refs.名称.style.width 或 this.refs.名称.style.widt..
Vue中获取元素的宽高
ilovexiaoming1的博客
12-25 2万+
一、获取元素 1、this.$refs 2、document.querySelector() document.getElementById() document.getElementByTagName()等等 确保获取到的元素不是undefined或null vue中，在mounted()生命周期函数中才能获取dom元素，建议在修改样式时加个定时器，或者将代码放入 $nextTick()中执行。 二、获取元素的宽高 1、如果是内嵌样式style="width:100px,height:10..
Vue 获取dom元素宽高，给el-table表格设置动态高度:height；最大高度:max-heigh
林中明月间丶
06-04 1万+
https://www.jianshu.com/p/371659eb1fe3 //获取table的宽度 :style="'width:'+dataWidths+'px'" letdataWidth=this.$refs.tab1.offsetWidth;//offsetHeight
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值