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.js之vue-cli脚手架的搭建详解
本篇文章主要介绍了vue.js之vue-cli脚手架的搭建详解，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-05-05
Vue3动态倒计时的代码实现
在使用Vue框架开发Web应用时,倒计时功能是一个常见的需求,它可以在一定时间内重复执行某些操作,比如防止用户重复提交表单、限制投票次数、实现验证码获取等功能,所以本文给大家介绍了Vue3动态倒计时的代码实现,需要的朋友可以参考下
2024-09-09
vue项目打包之后背景样式丢失的解决方案
今天小编就为大家分享一篇关于vue项目打包之后背景样式丢失的解决方案，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧
2019-01-01
解决Vue路由导航报错:NavigationDuplicated: Avoided redundant navig
这篇文章主要给大家介绍了关于解决Vue路由导航报错:NavigationDuplicated: Avoided redundant navigation to current location的相关资料,这是最近做项目时候遇到的一个问题,现将解决办法分享出来,需要的朋友可以参考下
2023-01-01
前端框架Vue.js构建大型应用浅析
这篇文章主要为大家详细介绍了前端框架Vue.js构建大型应用的相关资料,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-09-09
Vue中data数据初始化方法详解
这篇文章主要介绍了Vue中data数据初始化方法，数据初始化是在组件实例化时发生的，在组件中，可以通过data选项来定义组件的初始数据，需要详细了解可以参考下文
2023-05-05
vue源码之批量异步更新策略的深入解析
这篇文章主要给大家介绍了关于vue源码之批量异步更新策略的相关资料，关于vue异步更新是我们日常开发中经常遇到的一个功能，需要的朋友可以参考下
2021-05-05
van-dialog弹窗异步关闭功能-校验表单实现
有时候我们需要通过弹窗去处理表单数据，在原生微信小程序配合vant组件中有多种方式实现，其中UI美观度最高的就是通过van-dialog嵌套表单实现，这篇文章主要介绍了van-dialog弹窗异步关闭-校验表单,需要的朋友可以参考下
2023-11-11
关于在vue 中使用百度ueEditor编辑器的方法实例代码
这篇文章主要介绍了在vue 中使用百度ueEditor编辑器的方法实例代码 ,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
2018-09-09
VUE开发一个图片轮播的组件示例代码
本篇文章主要介绍了VUE开发一个图片轮播的组件示例代码，对图片轮播效果感兴趣的小伙伴们可以参考一下。
2017-03-03