Cannot read property '$el' of undefined at VueComponent

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

赏花赏景赏时光

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

阅读量2.5w

点赞数 1

CC 4.0 BY-SA版权

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

本文链接：https://blog.youkuaiyun.com/tangxiujiang/article/details/80642431

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

分享到新浪微博

扫一扫
举报

举报

专栏目录

TypeError: Cannot read property ‘$el‘ of undefined

weixin_46128398的博客

04-14

4482

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

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

Brod-Roy的博客

12-07

3550

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

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

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

热门推荐

sunwenpinglike的博客

03-21

41万+

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

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

tfytianfengyang的博客

01-10

2111

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

1651

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

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

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

08-18

4468

<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

Element 报错 Cannot read property ‘setCurrentRow‘ of undefined element

单飞吧的博客

09-10

3456

这个错误是因为你的dom元素还没有加载完，就使用了 setCheckedKeys 。也就是你写的this.$refs.monthlyPlanTable.setCurrentRow(this.tableData[0]); 这个里面的 monthlyPlanTable还没有加载出来。解决方案： this.$nextTick(() => { if( this.tableData.length > 0){ this.$refs.monthlyPlanTable.setCurrentRo

解决 “TypeError: Cannot read properties of undefined (reading ‘xxx‘)“

qq_57558631的博客

05-17

12万+

这个报错要用到的数据读不到这个属性 1.检查你的data定义的属性是不是没有你用到的这个属性,没有的话就定义一个，如下： #template <div class="he-info__item"> <span class="he-label">收货人姓名:</span> <span class="he-value">{{ detail.buyer.name }}</span> </div> <div cla....

微信小程序Cannot read property ‘$$‘ of undefined

m0_46182627的博客

11-07

9134

Cannot read property ‘$$’ of undefined 情况简述： <swiper> <block wx:for="{{questions}}" wx:key="*this"> <swiper-item> <view> {{item.q_stem}} </view> <view>

TypeError: Cannot read property 'xxxx' of undefined的解决方法

静幽水

10-12

9万+

TypeError: Cannot read property ‘length’ of undefined

vue中莫名其妙报错“cannot read property of undefined”

geidongdong的博客

12-13

1万+

夸一下：转自原文链接：https://blog.youkuaiyun.com/weixin_46399753/article/details/104802204 这个哥们真不错，不当老师可惜了。前言 vue项目中经常会遇到"cannot read property ‘某某某’ of undefined"的报错信息。下面我就简单分析下报错原因及解决方法问题描述 info是服务端返回的数据，是一个对象。我们要做的就是把对象里的值放到页面显示，先看一下我出错的代码片段 {{info.supports[0].name}}

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

03-29

### 错误分析在 Vue.js 中遇到 `TypeError: Cannot read property 'name' of undefined` 的错误通常表明尝试访问的对象为 `undefined` 或者尚未初始化。这种问题可能由多种原因引起，例如数据绑定不正确、异步加载延迟或者组件间通信出现问题。以下是可能导致此错误的一些常见场景及其解决方案： --- #### 场景一：数据未正确定义或初始化如果在模板中直接访问了一个未定义的数据属性，则会触发该错误。例如，在按钮点击方法 `btnTag` 中试图访问某个对象的 `name` 属性，而该对象本身可能是 `undefined`。 **解决方法** 确保所有依赖的数据都已正确定义并初始化。可以通过设置默认值来避免此类问题[^1]。 ```javascript data() { return { user: {} // 初始化为空对象而非 undefined }; }, methods: { btnTag() { console.log(this.user.name); // 如果 user 是空对象，默认不会抛出错误 } } ``` --- #### 场景二：异步操作导致数据延迟加载当通过 API 调用或其他异步方式获取数据时，可能会因为数据尚未到达而导致访问失败。 **解决方法** 在访问前检查目标对象是否存在，并使用条件渲染防止提前访问[^2]。 ```html <template> <div v-if="user"> {{ user.name }} </div> </template> <script> export default { data() { return { user: null // 初始状态设为 null 表明数据还未加载完成 }; }, created() { setTimeout(() => { this.user = { name: "John Doe" }; // 模拟异步请求 }, 1000); } }; </script> ``` --- #### 场景三：Vuex Store 数据缺失如果正在从 Vuex store 获取数据，但发现某些字段不存在，也可能引发类似的错误。 **解决方法** 可以在计算属性中添加保护逻辑以应对潜在的 `undefined` 值[^3]。 ```javascript computed: { userName() { return this.$store.state.currentUser && this.$store.state.currentUser.name; } } ``` --- #### 场景四：跨窗口上下文丢失有时由于复杂的项目结构（比如多页面应用），Vue 实例可能无法正常传递至子模块或新打开的浏览器标签页中，从而造成 `$store` 等全局变量不可用的情况。 **解决方法** 可以考虑将 Vue 实例挂载到全局作用域下以便于调试和共享[^4]。 ```javascript // main.js 文件中 window.vm = new Vue({ el: '#app', ... }); // 子模块中重新引入 const vm = window.vm; console.log(vm.$store.getters.someGetter); ``` --- #### 场景五：嵌套对象解构不当对于深层嵌套的对象，如果没有逐层验证其存在性就贸然取值也会报错。 **解决方法** 利用可选链运算符 (`?.`) 来简化安全检测过程[^5]。 ```javascript methods: { displaySkuName() { const name = this.product?.skuInfo?.name || 'Default Name'; alert(name); } } ``` --- ### 总结上述几种情况涵盖了大部分关于 `Cannot read property 'XXX' of undefined` 类型错误的可能性。具体采取哪种措施取决于实际应用场景以及代码实现细节。务必始终遵循良好的编程习惯——即对任何外部输入都要做充分校验后再加以运用！ ---