web前端Vue报错:Uncaught (in promise) TypeError:Cannot read properties of nu解决

更新时间：2023年01月29日 15:27:05 作者：吕氏春秋i

这篇文章主要给大家介绍了关于web前端Vue报错:Uncaught (in promise) TypeError:Cannot read properties of nu的解决方法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下

前言

最近在写vue项目在写自定义分页器的时候报了一个异常知道错误却一直找不到解决方案

苦思冥想后还是js的基础语法不扎实导致的，在此记录一下解决方案和思路

为以后的bug解决之路打下基础

错误提示

错误内容Uncaught (in promise) TypeError: Cannot read properties of null (reading 'length')

错误截图如下：

errot

BUG分析

此bug大概是说我写的一句语法，它没有找到length这个方法

我们都知道java中只有集合和数组才有size和length这种方法

在vue语法中也同样支持数组语法，既然它说找不到那就是，这不是一个数字结构！

下面是我代码中的源代码

 <div v-if="item.disease.length > 4 ? true:false"> 
 <a style="pointer-events: none; color: #C8DBF2;" 
 @click="addDisease(item,index)">+添加症状</a> </div>

问题就出在item.disease.length > 4 ? true:false这句三目表达式上

item.disease可能不是一个数组，比如item.disease这个对象为空

这样一来item.disease就没有.length这个方法了…

BUG解决

根据上述的分析，我们可以多加一层判断

先判空再写三目表达式，语法我们改为下面这样子先判空 item.disease!=null

 <div v-if="item.disease!=null && item.disease.length > 4 ? true:false"> 
 <a style="pointer-events: none; color: #C8DBF2;" 
 @click="addDisease(item,index)">+添加症状</a>

如此这个分页器就完成了没bug了~

总结

到此这篇关于web前端Vue报错:Uncaught (in promise) TypeError:Cannot read properties of nu解决的文章就介绍到这了,更多相关Vue报错:Uncaught (in promise) TypeError内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

如何重置vue打印变量的显示方式
这篇文章主要给大家介绍了关于如何重置vue打印变量显示方式的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起看看吧。
2017-12-12
在vant中如何使用dialog弹窗
这篇文章主要介绍了在vant中如何使用dialog弹窗，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-05-05
Antd-vue Table组件添加Click事件,实现点击某行数据教程
这篇文章主要介绍了Antd-vue Table组件添加Click事件,实现点击某行数据教程，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-11-11
vue-cli解决IE浏览器sockjs-client错误方法
这篇文章主要为大家介绍了vue-cli解决IE浏览器sockjs-client错误方法详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
2023-08-08
vue3过渡动画的详解
这篇文章主要为大家详细介绍了vue3过渡动画，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
2022-02-02
Vue3在router中使用pinia报错的简单解决办法
这篇文章主要给大家介绍了关于Vue3在router中使用pinia报错的简单解决办法,什么是pinia,可以理解为状态管理工具,文中通过图文介绍的非常详细,需要的朋友可以参考下
2023-08-08
Element Dropdown下拉菜单的使用方法
这篇文章主要介绍了Element Dropdown下拉菜单的使用方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-07-07
vue注册组件的几种方式总结
下面小编就为大家分享一篇vue注册组件的几种方式总结，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-03-03
vue使用AES.js的步骤详解
AES对数据传输加密、解密处理---AES.js，下面分步骤给大家介绍vue使用AES.js的示例代码，感兴趣的朋友跟随小编一起看看吧
2021-10-10
vue中{{}},v-text和v-html区别与应用详解
这篇文章主要介绍了vue中{{}},v-text和v-html区别与应用详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下
2021-09-09