Cannot read property '$el' of undefined at VueComponent

最新推荐文章于 2025-06-25 09:08:26 发布

赏花赏景赏时光

最新推荐文章于 2025-06-25 09:08:26 发布

阅读量2.5w

点赞数 1

分类专栏： vue 文章标签： Cannot read property '$el' of

vue 专栏收录该内容

61 篇文章

订阅专栏

本文介绍了解决Vue项目中子组件DOM操作错误的方法。具体地，在使用this.$refs.lyricList操作子组件DOM时遇到$el未定义的问题，并最终通过调整template中的ref属性值解决了该问题。

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

在.vue文件的template标签里面引用子组件，如下所示

<scroll class="middle-r" ref="lyriclist" :data="currentLyric && currentLyric.lines"></scroll>

然后再<script>中的methods属性中的一个方法去获取到该对象：由于<scroll>是一个子组件，通过this.$refs.lyricList是不能操作子组件里面的DOM的，因此需要引用$el来获取DOM对象
this.$refs.lyricList.$el.style[transform] = `translate3d(${offsetWidth}px,0,0)`

然后再浏览器报错：报错文件player.vue，发生错误的行数是423行，错误大概意思是说$el属性未定义，而这个书写语句是在middleTouchMove()函数里面的。

分析：根据错误类型是说这个对象未定义，那大致猜测是this.$refs.lyricList没有获取到组件元素，可以结合template中的html中元素的ref属性的定义。结果发现在html中的ref='lyriclist'与js中的引用不一样即this.$refs.lyricList

player.vue?55e8:423 Uncaught TypeError: Cannot read property '$el' of undefined at VueComponent.middleTouchMove

解决方法：将template中的ref属性的值改成ref='lyricList'就ok了

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

赏花赏景赏时光

关注关注

1
点赞
踩
0

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

微信小程序swiper组件与java后端接口整合出现了[渲染层错误] TypeError: Cannot read property ‘$$‘ of undefined

Steel_Gun的博客

06-29

2531

[渲染层错误] TypeError: Cannot read property '$$' of undefined

vue3.0+element 报Cannot read property ‘prototype‘ of undefined

xiawenyi1234的博客

01-06

1万+

写太多vue2.0项目了，3.0都出来这么长时间了，我还没用过，今天初体验一番。（之前都是听说坑很多，今天也遇到一个）防止旧版本脚手架影响项目，我先卸载老的 npm uninstall vue-cli -g //或者 yarn global remove vue-cli 直接用最新的脚手架（Vue CLI 3的包名称由 vue-cli 改成了 @vue/cli）注: Vue CLI 3需要 nodeJs ≥ 8.9 cnpm install -g @vue/cli //yarn global .

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

TypeError: Cannot read property ‘$el‘ of undefined

weixin_46128398的博客

04-14

4479

问题描述，在created函数中通过$el获取某个组件元素报错，报错信息如下：解决方法：不能在created函数中获取元素，元素还没渲染，需要到mouted函数获取

【Uniapp】TypeError Cannot read property ‘$el‘ of undefined 报错及解决方案

Brod-Roy的博客

12-07

3550

TypeError: Cannot read property ‘$el’ of undefined 报错及解决方案

md-editor-v3编辑器滚动时出现Cannot read properties of null错误分析

热门推荐

sunwenpinglike的博客

03-21

41万+

例如：TypeError: Cannot read properties of undefined (reading '$el') at eval。

Vue打包Cannot read property 'tapPromise' of undefined报错处理.docx

01-21

Vue打包Cannot read property 'tapPromise' of undefined报错处理 Vue.js是一款流行的前端框架，用于构建用户界面和单页应用程序。然而，在使用Vue.js时，我们可能会遇到一些报错信息，例如Cannot read property '...

Cannot read property 'name' of undefined at VueComponent.btnTag

03-29

在 Vue.js 中遇到 `TypeError: Cannot read property 'name' of undefined` 的错误通常表明尝试访问的对象为 `undefined` 或者尚未初始化。这种问题可能由多种原因引起，例如数据绑定不正确、异步加载延迟或者组件间...

uniapp Cannot read property '$el' of undefined

01-25

在开发过程中遇到 `Cannot read property '$el' of undefined` 的错误通常是因为尝试访问尚未创建或挂载的 DOM 元素。根据描述，这类错误可能发生在生命周期的不同阶段。 #### 生命周期钩子的选择不当当试图在一个...

vue2 报错 TypeError:Cannot read properties of undefined (reading ‘ __ob__‘

tfytianfengyang的博客

01-10

2106

1、在组件A中引入另一个组件B中保留无效或者与组件A重叠的 data(){}，组件 B 根据条件加载或销毁，即带有 v-if，当 B 销毁时会出现上述问题，去掉B 中data(){}的内容或者写正确，问题就能解决。需求是table表格修改时，子组件可以调用父组件传过来的参数，这个时候正常父子组件传参把要修改的这行数据传过去就可以了，但是如果这行数据为空，子组件中没有接收到传过来的值，在input输入数据时，就会报这个错误。根据两个方法逐步排除了一下发现问题不在这。

Vue3 Cannot read properties of undefined (reading ‘use‘)

weixin_45663264的博客

03-24

1万+

在用vue3脚手架搭建项目的时候，配置路由一直报错，错误代码不显示了正确代码 min.js import { createApp } from 'vue' import App from './App.vue' import Router from './router/index' // createApp(App).use(Router).mount('#app') const app = createApp(App) app.use(Router) // app.use(ElementPl

Vue TypeError Cannot read properties of undefined (reading ‘xxxx‘) ，错误原因及解决方案

m0_67392811的博客

03-03

4405

今天使用Vue+axios 查询数据库信息，并显示。用到了v-for便签。 axios 也可以正常接收到数据。但是总是报同一个错误，无法读取未定义的标签。但是代码中明显有。 TypeError: Cannot read properties of undefined (reading 'xxxx') 错误截图：原因：上面的代码为： <td>{{b.book.publisher.name}}</td> <td>{{b.book.publisher.

Uncaught TypeError:Cannot read property el of null

wind_linjie的博客

05-30

1451

一般情况下，这种报错是因为由于有些代码没有写合适，包括所在页面的引用路径，逗号分号有没有写合适，还有所用的变量是否的完整，仔细检查一下就没有报错了，不会是因为底层的报错哒 ...

vue3 Cannot read properties of null (reading ‘$el‘) 报错问题解决

dxl99的博客

08-08

1648

此段报错是因为在created钩子中为创建组件实例,所以将操作放到onMounted中即可解决此报错!

vue 控制台报错Cannot read property ‘value‘ of undefined

Node.js安装报错 - npm -v 查看版本无效

08-18

4467

<el-form-item v-for="(item,i) in info" :key="i" :label="item.name"> <el-input placeholder v-model="item.value"> <template slot="append">{{item.danwei}}</template> </el-input> ..

关于TypeError: Cannot read property 'validate' of undefined at VueComponent.submitForm

叙话代码

12-31

6513

vue集成element-UI报错解决办法: ref里面关键字和$refs要一致（也就是这里的loginForm）

TypeError: Cannot read property ‘indexOf‘ of undefined at VueComponent.resetFields报错解决

weixin_44707050的博客

08-13

3677

当点击清空表单按钮时，会有这个报错，是因为这个form表单中含有未找到的值；比如：当active=1时，el-form-item的prop绑定username;当active=2，prop绑定gender; 当active=1时，这个form表单中有username和gender,gender只是不在页面上展示，清空表单时，会清空form表单中所有的值，找不到gender字段所以报的错；解决：将element自带的resetFields替换成form表单中每一项为初始值即可；比如： r