脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → Vue报错:Uncaught (in promise) TypeError

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_drf实现短信验证码

    vue_drf实现短信验证码

    我们在做网站开发时，登录页面很多情况下是可以用手机号接收短信验证码，本文主要介绍了vue_drf实现短信验证码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-07-07
  • Vue3项目中的hooks的使用教程

    Vue3项目中的hooks的使用教程

    今天我们稍微说一下 vue3 项目中的 hooks 的使用，其实这个 hooks 呢是和 vue2 当中的 mixin 是类似的，学习过 vue2 的小伙伴一定对 mixin 一定比较熟悉，快跟随小编一起来学习学习吧
    2022-08-08
  • Vue-router优化import引入过多导致index文件臃肿问题

    Vue-router优化import引入过多导致index文件臃肿问题

    这篇文章主要为大家介绍了Vue-router优化import引入过多导致index文件臃肿问题解决,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-08-08
  • vue样式叠层z-index不起作用的解决方案

    vue样式叠层z-index不起作用的解决方案

    这篇文章主要介绍了vue样式叠层z-index不起作用的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-04-04
  • vue 中使用print.js导出pdf操作

    vue 中使用print.js导出pdf操作

    这篇文章主要介绍了vue 中使用print.js导出pdf操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • Vue 幸运大转盘实现思路详解

    Vue 幸运大转盘实现思路详解

    这篇文章主要介绍了Vue 幸运大转盘实现思路详解,需要的朋友可以参考下
    2019-05-05
  • vue之el-tree懒加载数据并且实现树的过滤问题

    vue之el-tree懒加载数据并且实现树的过滤问题

    这篇文章主要介绍了vue之el-tree懒加载数据并且实现树的过滤问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2023-04-04
  • Vue SPA首屏加载缓慢问题解决方案

    Vue SPA首屏加载缓慢问题解决方案

    这篇文章主要介绍了Vue SPA首屏加载缓慢问题解决方案，首屏时间（First Contentful Paint），指的是浏览器从响应用户输入网址地址，到首屏内容渲染完成的时间，此时整个网页不一定要全部渲染完成，但需要展示当前视窗需要的内容
    2023-03-03
  • elementPlus表格二次封装过程

    elementPlus表格二次封装过程

    我们正常在开发项目中,表格的风格是一致的,但是表格或多或少会有些不同,有些是需要分页,有些是按钮功能不同,有些又需要加Tag,或者对时间进行格式化等,这篇文章主要介绍了elementPlus表格二次封装过程,需要的朋友可以参考下
    2024-07-07
  • Vue中自动生成路由配置文件覆盖路由配置的思路详解

    Vue中自动生成路由配置文件覆盖路由配置的思路详解

    这篇文章主要介绍了Vue中自动生成路由配置文件覆盖路由配置的思路详解,大概思路是读取@/views下所有index.vue如果当前文件下有包含相同路径则认为是它的子路由,需要的朋友可以参考下
    2024-05-05

最新评论