Cannot read property '$el' of undefined at VueComponent

最新推荐文章于 2024-08-16 07:38:35 发布

赏花赏景赏时光

最新推荐文章于 2024-08-16 07:38:35 发布

阅读量2.5w

点赞数

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

本文链接：https://blog.csdn.net/tangxiujiang/article/details/80642431

版权

vue 专栏收录该内容

61 篇文章 7 订阅

订阅专栏

在.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年卡可用

立即使用

赏花赏景赏时光

关注关注

0
点赞
踩
0

收藏

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

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

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

Steel_Gun的博客

06-29

2271

[渲染层错误] 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

4065

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

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

Brod-Roy的博客

12-07

3208

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

深入 Vue.js 的心脏：全面剖析 $el 属性

热门推荐

sunwenpinglike的博客

03-21

35万+

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

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

tfytianfengyang的博客

01-10

1362

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

9903

在用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: Uncaught TypeError: Cannot read property … of undefined

weixin_43877725的博客

09-01

4884

记录使用vue遇到的一个问题：在把获取到的信息渲染到页面上出报异常了数据因为业务的需求，里面还有个对象信息 export default { name: "ShopInfo", data() { return { viewForm: { } } } } 获取数据然后进行处理之后 viewForm: { view: 'test', other: .

使用elementUI中的el-checkbox遇上Cannot read property ‘length‘ of undefined错误应该怎么办？

luoteen的博客

03-02

1万+

在使用el-checkbox时遇上这样的错误： TypeError: Cannot read property ‘length’ of undefined at VueComponent.isLimitDisabled (element-ui.common.js?ccbf:6452) at Watcher.get (vue.esm.js?efeb:4482) at Watcher.evaluate...

Uncaught TypeError: Cannot read properties of null (reading ‘$el‘)

weixin_40634691的博客

07-07

8089

TypeError: Cannot read property ‘$el‘ of undefinedUncaught TypeError: Cannot read properties of null (reading ‘$el’) at Proxy.eval (Detail.vue?4cfa:150:1) at eval (utils.js?ae29:7:1) 报错信息如上图。导致报错的代码如下图，下图代码是写在created里面的。原因是在created函数中通过$el获取某个组件元素报错。看到网

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

m0_67392811的博客

03-03

4250

今天使用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

1390

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

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

dxl99的博客

08-08

1374

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

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

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

08-18

4409

<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

6174

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

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

weixin_44707050的博客

08-13

3493

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

jsplumb cannot read property el of undefined

09-20

jsplumb cannot read property el of undefined错误通常表示在访问el属性时，该属性的值为undefined。这可能是因为你试图访问一个未定义的变量或对象的属性。为了解决这个问题，你可以检查你的代码中是否存在拼写...