在vue中使用this.$refs.xx.style报错问题

最新推荐文章于 2024-08-09 14:16:18 发布
最新推荐文章于 2024-08-09 14:16:18 发布
阅读量6.4k 收藏 7
点赞数 5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43506776/article/details/110579401
版权

一个比较常见的场景：在一个弹窗打开的时候立刻通过this.$refs来获取内容就会出现xxx is undefined的错误

因为ref本身是作为渲染结果被创建的，在渲染的时候是不能访问的，因为他们还不存在！

如果此时代码是需要这样来写代码，那么你可以在DOM渲染完毕后再进行获取

this.$nextTick(() => {
 this.$refs.name... //DOM渲染完毕后就能正常获取了
})

转载自：在vue中使用refs总是报错undefined

陈小玲玲
关注
vue使用之ref
前端李小白的博客
09-25 569
访问子组件实例或子元素 <base-input ref="usernameInput"></base-input> 现在在你已经定义了这个 ref 的组件里，你可以使用： this.$refs.usernameInput 来访问这个 <base-input> 实例，以便不时之需。比如程序化地从一个父级组件聚焦这个输入框。在刚才那个例子中，该 <base...
vue入门
Chow_yi的博客
03-09 334
1，创建vue项目 1.1，安装： npm install -g @vue/cli # OR yarn global add @vue/cli 检查版本 vue --version 升级 npm update -g @vue/cli # 或者 yarn global upgrade --latest @vue/cli 1.2，创建项目 创建一个新项目 vue create hello-world 选择下面三个 2、 2.1、组成-三部分 template 视图标签 （template标签不会
vue动态渲染ref,获取this.$refs.xxx.style为undefined
weixin_42947972的博客
06-14 1586
vue动态渲染ref
在Vue中this.$refs获取为undefined的原因和解决办法（this.$refs.属性为undefined原因）
最新发布
My_story_begins的博客
08-09 2047
this.$refs获取为undefined的原因和解决办法和this.$refs.属性为undefined原因
vue动态渲染ref,获取this.$refs.xxx.style为undefined获取循环元素中的style
c_qianxia5040的博客
03-24 1407
获取是没问题的，本文遇到的是要获取循环列表中某一元素，并改变其样式。refs.name是一个数组，无法通过 .style 获取样式，设置ref在v-for列表上，直接获取this.refs.name[index]上设置样式。只能遍历这个this.
vue使用$refs动态修改style，设置样式
qq_43628847的博客
10-10 1万+
在h5中，可以直接使用 this.$refs.indexChart.$el.style.display='none' 但是我打包运行成微信小程序，就会报错 TypeError: Cannot read property ‘$el’ of undefined 目前解决办法，暂时没找到 这几个是我百度尝试使用$refs改变样式，都没有生效，所以h5推荐使用第一种！！！！简单粗暴！！！！！ // that.$refs.indexChart.setAttribute("class","vi") //that.$r
Vue中的ref和$refs事件
qq_50260510的博客
06-08 335
Vue中的ref和$refs事件
Vue 2.x 常用知识点笔记（万字笔记）
m0_67266042的博客
03-09 196
Vue 2.x 笔记 常用知识点笔记，有错误欢迎指点哦~ 字数超过了一万字，得细品 目录 Vue 2.x 笔记 1.新建Vue实例 2.阻止生成生产提示 3.模板语法 3.1 插值语法 3.2 指令语法 3.2.1 单向数据绑定 3.2.2 双向数据绑定 4.MVVM模型 5.数据代理 5.1 回顾Object.defineProperty方法 5.2 什么是数据代理 5.3 Vue中的数据代理 6.事件处理 6.1 事件的基本使用 6.2 事件的修饰符 6.3 键盘事件
Vue 2.0 学习笔记（四）
weixin_44772326的博客
01-10 4051
组件和生命周期：Vue中的组件化开发，组件的生命周期，组件之间的数据共享传值，ref引用。
Vue总结篇中 （看完你就学会整个Vue）
Sakura1921的博客
02-24 599
1.插槽 1. 允许 子组件在 父组件中使用 通过子组件（双标签） 嵌套 html结构，这个结构可以在子组件中通过<slot/>组件接收 2. 具名插槽 <slot name="a"></slot> 父组件里面的子组件在给上名 3. 作用域插槽 可以使用子组件数据 <script> // 定义子组件对象 const Child = { template: ` <div>
Vue学习-基础篇4
练体育的程序员的博客
05-31 1430
目录 组件结构讲解 如何在组件中引入其它组件 组件中如何使用外部插件 组件间的传值 Vue-cli项目创建 什么是脚手架 创建项目： Vue-cli项目结构 Vue-cli 入口文件main.js分析 组件结构讲解 把每个组件都放到一个独立的.vue文件里， 文件的后缀是：.vue 文件 此文件三大部分： template 、 script 、 style template 写html结构的 注意这里的h..
通过Vue的ref给dom元素设置样式
LLL3189860667的博客
09-06 7498
1.给dom元素设置上ref属性，并为其取值（这个值可以理解为这个dom元素的ref名称，一会要通过这个名称找到对应的dom元素）2.通过this.$refs.bottom1（就是this.$refs.ref名称），获取到dom元素并为其设置style样式。
vue中ref的使用方法
qq_44306615的博客
10-25 528
vue中ref的使用方法
this.$refs.XXX.$el.style 修改style样式
josiecici的博客
06-23 1万+
vue3 通过ref动态改变style
jiangliuhuan123的博客
08-04 3587
通过下拉菜单组件,控制其他组件的style。
Vue使用 $refs 报错的解决方法 ( $refs优雅使用方法 )
阿Gogo
01-02 6038
<form v-model="yourModel" ref="yourModel"> <input v-model="yourModel.value" type="text"> </form> <script> this.$refs.yourModel </script>
vue的ref属性获取/设置标签的样式
斗师——Ace
03-14 3万+
添加小程序，兑换各种视频教程/数据资源。 1. 获取标签的宽高：this.$refs.image.clientHeight/clientWidth。 2. 设置标签的宽高：this.$refs.content.$el.style.top="12px" <div > <div ref="image" class="image"></div&gt...
this.$refs.element.style.display = 'none', ts提示类型报错问题
weixin_33743703的博客
02-14 3213
上代码 问题原因 没有声明this.$refs.detailWrapper的类型, 所以ts会出现错误 解决方法: 如下图
vue中ref的使用（this.$refs获取为空）
热门推荐
如果不是现在，那是什么时候呢
04-06 4万+
//6.14更新 但是有个办法，我们可以使用 this.$nextTick(() => { // todo }) setTimeout(() => { // todo }, 0) 来得到数据 ref 本身作为渲染结果被创建，在初始渲染的时候不能访问他们，是不存在的 $refs不是响应式的，只在组件渲染完成后才填充 用于元素或子组件注册...
vue中的 this.$refs
09-07
在Vue中，this.$refs是用来获取DOM元素或组件的引用的。当ref写在标签上时，通过this.$refs.名字可以获取到该标签对应的DOM元素。当ref写在组件上时，通过this.$refs.名字可以获取到该组件的引用。 在Vue实例中，可以通过this.$refs来获取整个Vue实例中所有的引用。例如，可以使用this.$refs.hello来获取到具有ref='hello'的div元素的引用，并通过innerHTML属性获取其内容。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值