TypeError: Cannot read property 'xxxx' of undefined的解决方法_typeerror: cannot read property 'sendbeacon' of un-程序员宅基地

技术标签: vue  TypeError  undefined  

在vue或者js中,使用.length的时候在浏览器的控制台中经常会报TypeError: Cannot read property 'length' of undefined的错误,类似的错误还有很多,大多都是TypeError: Cannot read property 'xxx' of undefined,出现这种错误的原因很简单,就是你调用该方法或函数的字符串或数组、对象等等出现了为空的情况,加一个判断就好了。

例子:
下面的代码会报TypeError: Cannot read property 'length' of undefined的错误

let txtDom = this.$refs.textContainer;
for (let i = 0; i < txtDom.length; i++) {
    
       let curHeight = txtDom[i].offsetHeight;
       if (curHeight > twoHeight) {
    
           this.$set(this.als, i, Object.assign({
    }, this.als[i], {
     status: true }))
       } else {
    
           this.$set(this.als, i, Object.assign({
    }, this.als[i], {
     status: true }))
       }
}

原因就是txtDom出现了为空的情况,所以就没有length的属性了。解决方法就是判断txtDom是否为空,如下:

let txtDom = this.$refs.textContainer;
if(txtDom){
    
     for (let i = 0; i < txtDom.length; i++) {
    
         let curHeight = txtDom[i].offsetHeight;
         if (curHeight > twoHeight) {
    
             this.$set(this.als, i, Object.assign({
    }, this.als[i], {
     status: true }))
         } else {
    
             this.$set(this.als, i, Object.assign({
    }, this.als[i], {
     status: true }))
         }
     }
 }

上面是在js中的代码报错,有时候我们在html中也会使用一些函数或方法,也要做判断,如下al.time是从后端读取的数据,可能会为空,会报TypeError: Cannot read property 'substring()' of undefined的错误:

<el-tag size="mini"   v-if="al.time">发布时间</el-tag>{
    {
     al.time.substring(0,10)}}

解决方法是使用三元运算符做判断:

<el-tag size="mini"   v-if="al.time">发布时间</el-tag>{
    {
     al.time ? al.time.substring(0,10):al.time}}

这样就可以完美解决问题了。

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/jingyoushui/article/details/102523390

智能推荐

java--栈、堆、方法区_java栈,堆,方法区的绘制-程序员宅基地

文章浏览阅读245次。栈的特点如下:1 .栈描述的是方法执行的内存模型,每个方法被调用都回创建一个栈帧(存储局部变量、操作数、方法出口等)2。JVM为每个县城创建一个栈,用于存放该线程执行方法的信息(实际参数、局部变量等)3.栈属于线程私有,不能实现线程间的共享4.栈的存储特性是“先进后出,后进先出”。(弹夹结构)5.栈是由系统自动分配,速度快!栈是一个连续的内存空间!堆的特点如下:1 .堆用于存储..._java栈,堆,方法区的绘制

【检测】Prime Sample Attention in Object Detection-程序员宅基地

文章浏览阅读3k次。Prime Sample Attention in Object Detection作者:CUHK SenseTime Joint Lab, NTU在目标检测中的一个普遍认知就是应该平等的对待每个sample和目标。这篇文章研究了不同的样本对于最终结果的影响。作者认为在每个minibatch中的样本既不是独立的也不是同样重要的,所以一个平均的结果并不能意味是一个更高的mAP。作者提出了Prim..._prime sample attention in object detection

Elasticsearch地理空间之geo_shape_elasticsearch geo_shape-程序员宅基地

文章浏览阅读6.2k次,点赞2次,收藏20次。参考文章:Elasticsearch地理形状Elasticsearch geo_shape地理形状ES地理范围查询第二讲:地理位置信息之geo_shapeES GEO地理空间查询java版一、概述通常情况,我们使用一个经纬度坐标表示一个店铺的位置、一个用户的位置,经纬度在地图上仅仅表示一个点,有时候需要表示一个区域,例如:停车场、商场、学校等等,这些区域拥有各种各样的形状,包括:圆形、多边形等等。ES中存储地理形状的数据类型为: geo_shapegeo_shape支持存储的常用形状数据如_elasticsearch geo_shape

WMI的讲解(是什么,做什么,为什么)-程序员宅基地

文章浏览阅读2w次,点赞17次,收藏72次。讲在前面: 笔者在阅读了WMI的微软官方文档以及国内优秀前辈的介绍文章后,获益匪浅,WMI是一个较为老的知识点了,但是对于想要简单理解WMI的同学来说,对于一个新的知识点进行理解最好是能够有生动形象的例子进行抛砖引玉式的解读,将晦涩难懂的知识点吃透、理解后用简单的话语将其作用表达清楚,使其读者能够快速的理解并为读者接下来深入理解打好基础,以便在攻防中更好的利用WMI,所以此篇文章笔者使用通俗的话语将WMI表达清楚,在下文中对于基础薄弱的同学对于COM组件、Pr_wmi

SpringBoot:AOP切面execution表达式_execution 切面表达式有返回值吗-程序员宅基地

文章浏览阅读2k次。execution表达式基本语法格式为:execution(<修饰符模式>?<返回类型模式><方法名模式>(<参数模式>)<异常模式>?)说明:除了返回类型模式,方法名模式和参数模式外,其它项都是可选的。例如:@Pointcut(“execution(public * com..controller….*(…))”)说明:1、【非必填】修饰符模式。public 表示public 级别方法。 可以不写,不写就是所有的方法(publ_execution 切面表达式有返回值吗

EditorApplication.update += EditorUpdate;-程序员宅基地

文章浏览阅读6.2k次。在用Unity的时候遇到了这个表达,然后比较好奇。说一下自己对它的理解,大致的代码是这样写的:void Awake() { Timestamp = Utility.GetTimestamp(); /*获取系统当前时间*/ EditorApplication.update += EditorUpdate; }public void EditorUpdate() {..._editorapplication.update

随便推点

EEG信号的节律信号的生成_eeg 信号节律波提取滤波器综合设计-程序员宅基地

文章浏览阅读582次。EEG信号中常用的节律信号包括,delta, theta, alpha, beta。由于这些节律信号在某个固定的频率段上,因此可以用滤波的方法得到。滤波器的设计,可以是IIR,和FIR。如果是对相位没有要求,滤波后需要计算其波段能量,IIR滤波器可选;如果对信号的相位有要求,线性相位的FIR滤波器可选。选用经典滤波器的问题是,要选择合适的通带和阻带的频率,还要选择合适的衰减的指标,这些指标的不同,滤波的结果会不一样。基于小波包的节律信号获取,是一个常用的滤波方式,因为小波变换实现也更简单。..._eeg 信号节律波提取滤波器综合设计

PDF改背景和字体颜色_goodnotes中如何快速把底页颜色和字体颜色改变-程序员宅基地

文章浏览阅读2.4w次。想打印一个PDF, 却是很深的背景白的字, SIGH. 用Adobe Acrobat Professioinal 7.0打开, 发现只能一页一页的删除背景, 改字颜色, 如下: PDF中各部分是按元素保存的, 可以查看一个个元素, 包括背景, 图片, 文字, 可以对每个元素进行修改. 点击视图-->导览标签-->内容, 打开内容视图, 在这里可以看到所有的元素. 它们是以页面为分组, _goodnotes中如何快速把底页颜色和字体颜色改变

读透《阿里巴巴数据中台实践》,其到底有什么高明之处?_阿里数据中台 如何落实-程序员宅基地

文章浏览阅读1w次,点赞10次,收藏66次。最近阿里巴巴分享了《阿里巴巴数据中台实践》这个PPT(自行搜索原始文章),对于数据中台的始作俑者,还是要怀着巨大的敬意去学习的,因此仔细的研读了,希望能发现一些不一样的东西。读这些专业的PPT,实际是非常耗时的,你需要把这些PPT外表的光鲜扒光,死抠上面的每一个字去理解底下隐藏的含义,然后跟你的已有知识体系去对比,看看是否有助于完善自己的认知,对于自己不理解的,还需要经常去检索相关的文档。..._阿里数据中台 如何落实

使用poi读取excel异常IOException: OPC Compliance error [M4.3]: Producers shall not create a document ele..._exception in thread "main" cn.hutool.poi.exception-程序员宅基地

文章浏览阅读4k次。前言:  前一段时间,帮女朋友整理她们公司的破Excel文档,本着减少工作量的原则(居家好男人),帮忙写了个java main去读取整理Excel,到后来发现在读取到xlsx的excel报错,报错信息居然没看懂。。。报错信息Exception in thread "main" cn.hutool.poi.exceptions.POIException: IOException: OPC Co..._exception in thread "main" cn.hutool.poi.exceptions.poiexception: ioexceptio

Beyond Compare文件比对_beyond compare 4.2 密钥-程序员宅基地

文章浏览阅读3.2k次。Beyond Compare_beyond compare 4.2 密钥

第一章:初探Spring Cloud Config配置集中管理_springcloud 集中配置管理-程序员宅基地

文章浏览阅读1.5k次。前路艰难,但谨记,你并不孤独。Spring Cloud如火如荼,抽空研究研究Spring大家族中的新份子。具体的介绍不会粗线在本系列博文中,如需要理论等知识直接百度or谷歌。Spring Cloud中保护N多已构建好的微服务,可以做到即插即用,其中大致包含几种服务:Config、Eureka、Ribbon、Hystrix、Feign、Bus等,具体介绍及开源地址请见:Spring Cloud中文官_springcloud 集中配置管理

推荐文章

热门文章

相关标签