位置: IT常识 - 正文

【Vue】- 报错 Error in render: “TypeError: Cannot read properties of undefined (reading ‘nickname‘)“(vue错误处理)

编辑:rootadmin
【Vue】- 报错 Error in render: “TypeError: Cannot read properties of undefined (reading ‘nickname‘)“

推荐整理分享【Vue】- 报错 Error in render: “TypeError: Cannot read properties of undefined (reading ‘nickname‘)“(vue错误处理),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue error in v-on handler,vue error in nexttick,vue错误提示,vue error in v-on handler,vue errorhandler,vue 302报错,vuecli报错,vue errorhandler,内容如对您有帮助,希望把文章链接给更多的朋友!

在created()钩子函数请求接口并报错数据,渲染在dom元素是可以正常渲染,但是在开发者工具中就会报错 Error in render: "TypeError: Cannot read properties of undefined (reading 'nickname')"

 意思是 在created调用封装请求接口的函数 ,获取到的数据再给保存起来并渲染到dom元素,不过数据渲染之前 dom元素会先渲染一次到渲染获取到的数据。那么就会导致渲染获取的数据会未定义,没有这个属性/对象。

说通俗点就是三层表达式a.b.c,在对象a中没有对象b,那么读取对象a.b.c中的值,自然会报错。如果是两层表达式a.b则不会报错,返回的是undefined。

明白了原因之后上手排查代码发现果然下面vue模板代码中出现了三层表达式,十分可疑,出错的地方应该就在这里。

原因:【Vue】- 报错 Error in render: “TypeError: Cannot read properties of undefined (reading ‘nickname‘)“(vue错误处理)

我们发现这里的 list 是vuex中state管理加载的数据,异步调用显示,然后vue渲染机制中:

异步数据先显示初始数据,再显示带数据的数据,

所以上来加载 list 时候还是一个空对象如下:

当渲染完成后,才加载异步数据 所以在渲染时,出现的三层表达式在list中取 list 的 user 属性是不存在,再在这个对象中取其他值自然会报错,但是渲染完成后,list中的值加载好了,自然可以取到,这也就解释了为什么界面正常显示,但开发者工具会报错的原因  

解决方法:

使用 v-if 来进行判断

 

判断是否有list.user这个属性或等于undefined,dom渲染前没有这个属性会销毁,dom渲染之后有这个会显示。 

本文链接地址:https://www.jiuchutong.com/zhishi/294501.html 转载请保留说明!

上一篇:将时间序列转成图像——马尔可夫转移场方法 Matlab实现(将时间序列转化为图像)

下一篇:axios-前后端数据交互流程(前端axios是什么)

  • 10086可以提取通话录音吗(10086话费能提现吗)

    10086可以提取通话录音吗(10086话费能提现吗)

  • 苹果13有双卡双待功能吗(苹果13有双卡双微信吗)

    苹果13有双卡双待功能吗(苹果13有双卡双微信吗)

  • 小米万能遥控怎么调空调制热(小米万能遥控怎么用不了)

    小米万能遥控怎么调空调制热(小米万能遥控怎么用不了)

  • 扫一扫使用了什么识别方式(扫一扫使用了什么工具)

    扫一扫使用了什么识别方式(扫一扫使用了什么工具)

  • miui11怎么关闭底下搜索栏(小米怎么去掉底部)

    miui11怎么关闭底下搜索栏(小米怎么去掉底部)

  • 微博的视频缓存在哪里(微博的视频缓存怎么删除)

    微博的视频缓存在哪里(微博的视频缓存怎么删除)

  • 苹果系统能不能更新系统(苹果系统能不能降级)

    苹果系统能不能更新系统(苹果系统能不能降级)

  • 企业微信为什么不能登录,只能注册(企业微信为什么加不了好友)

    企业微信为什么不能登录,只能注册(企业微信为什么加不了好友)

  • 华为nova7pro时间怎么设置24小时(华为nova7pro时间在哪设置)

    华为nova7pro时间怎么设置24小时(华为nova7pro时间在哪设置)

  • 爱奇艺超前点播电脑看不了(爱奇艺超前点播事件案例分析)

    爱奇艺超前点播电脑看不了(爱奇艺超前点播事件案例分析)

  • 苹果手表4代使用技巧(苹果手表4使用教程视频教程)

    苹果手表4代使用技巧(苹果手表4使用教程视频教程)

  • 开数据看缓存花流量吗(缓存之后开流量看会扣流量吗)

    开数据看缓存花流量吗(缓存之后开流量看会扣流量吗)

  • 安卓机怎么把数据移到另一只手机(安卓机怎么把数据移到安卓手机)

    安卓机怎么把数据移到另一只手机(安卓机怎么把数据移到安卓手机)

  • 华为areal10是什么型号(华为手机areal10)

    华为areal10是什么型号(华为手机areal10)

  • 淘宝收的红包在哪里看(淘宝收的红包在哪里查看)

    淘宝收的红包在哪里看(淘宝收的红包在哪里查看)

  • 夸克链信实名认证如何解绑(夸克链信是国家支持的吗)

    夸克链信实名认证如何解绑(夸克链信是国家支持的吗)

  • 荣耀10青春版有红外功能吗(荣耀10青春版有红外遥控吗)

    荣耀10青春版有红外功能吗(荣耀10青春版有红外遥控吗)

  • 淘宝愿望清单有什么用(淘宝心愿清单是干什么的)

    淘宝愿望清单有什么用(淘宝心愿清单是干什么的)

  • 爱奇艺视频播放失败怎么办(爱奇艺视频播放卡顿)

    爱奇艺视频播放失败怎么办(爱奇艺视频播放卡顿)

  • 荣耀20带无线充电吗(荣耀20无线充电吗)

    荣耀20带无线充电吗(荣耀20无线充电吗)

  • Linux用root账号创建一个新的登录账号的方法(linux如何用root用户登录)

    Linux用root账号创建一个新的登录账号的方法(linux如何用root用户登录)

  • 如果安装电脑系统,有什么快速的安装方法?(然后安装电脑系统)

    如果安装电脑系统,有什么快速的安装方法?(然后安装电脑系统)

  • egrep命令  在文件内查找指定的字符串(emerge命令)

    egrep命令 在文件内查找指定的字符串(emerge命令)

  • 企业官网可以用帝国cms吗(企业官网用什么系统)

    企业官网可以用帝国cms吗(企业官网用什么系统)

  • 企业自建房产缴契税吗
  • 纳税义务发生时间记忆口诀
  • 劳务费用 税率
  • 营业外支出影响损益吗
  • 资产负债表负债总额怎么看
  • 小规模纳税人进项
  • 制造费用属于资产类账户吗
  • 以前年度做的预算怎么查
  • 房地产开发临时用电
  • 购买的车位应如果要进行税务处理需注意什么?
  • 小规模没有进项可以开发票吗
  • 三证合一后还要去税务局吗
  • 目前建筑里面税金总共包括几部分
  • 无票收入冲回会计分录
  • 房产企业开发产品出租
  • 个人所得税申报密码如何设置
  • 小企业会计准则适用于哪些企业
  • 以资抵债方式取得的无形资产如何记账?
  • 核销坏账应具备的条件
  • 接受捐赠物品的增值税
  • 股金属于金融产品吗
  • win10右键没有打印
  • 冲暂估成本会计分录怎么做
  • 华为鸿蒙os升级机型曝光
  • 存出保证金计入货币资金吗
  • awk命令怎么用
  • php静态变量生命周期
  • 购入研发设备
  • 销售返利如何做账
  • mac快捷键是什么意思
  • 无法访问或访问被拒绝是怎么解决
  • 记账凭证填制的依据
  • 以土地投资溢价的公司
  • uniapp实战
  • 2023英伟达显卡天梯图完整版
  • 程序人是什么意思
  • mkfifo命令
  • linux脚本文件编写
  • 工程补偿款开什么发票
  • 汇算清缴后缴纳的企业所得税怎么做分录
  • 海关缴款书能重开吗
  • 资产计税基础填资产原值吗
  • 公司收不到的账款而发不出去怎么办
  • 固定资产的弃置费用
  • 债权投资利息收入调增还是调减
  • 税率开错了会影响贷款吗
  • 长期待摊费用怎么算出来的
  • 退教育费附加税怎么申报
  • 统一机构信用代码最后一位校验码
  • 分公司是否具有独立承担民事责任的能力
  • 增值税普通发票有什么用
  • 进货时的运费计入什么
  • 外债借款利率
  • 公司老板个人卡收支公司业务属于什么行为
  • 收到社保局的稳岗通知
  • 固定资产折旧的会计凭证
  • SQL Server中使用Trigger监控存储过程更改脚本实例
  • linux挂载yum
  • linuxvi编辑器的用法
  • win10系统自带浏览器在哪里
  • linux 查找语句
  • win10正式版多少钱
  • unity优化方案
  • dos批处理实例
  • flash 3 utility
  • vue动态引入模块
  • c调用java后又调用回
  • 备份文件并上传到网盘
  • 电脑完美平台
  • 安卓自定义ui
  • 用Fragment+ViewPager搭建万能的android界面
  • Unity3D实现Billboard效果
  • jquery弹出div遮罩层
  • mysql数据类型大全
  • 尽有可能的拼音
  • javascript面向对象 第三方类库
  • 动物大联盟是国内品牌吗
  • 个人绩效考核税务局
  • 广东可以去吗
  • 转让定价调查与调整实务问答
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设