位置: 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是什么)

  • 苹果手机丢失了怎么查找位置(苹果手机丢失了怎么办)

    苹果手机丢失了怎么查找位置(苹果手机丢失了怎么办)

  • 手机屏幕分辨率在哪看(手机屏幕分辨率等级)

    手机屏幕分辨率在哪看(手机屏幕分辨率等级)

  • airpods能和安卓配对吗(airpods能和安卓手机连接,哪些功能不能用)

    airpods能和安卓配对吗(airpods能和安卓手机连接,哪些功能不能用)

  • 小米9se怎么恢复出厂设置(小米9se怎么恢复出厂)

    小米9se怎么恢复出厂设置(小米9se怎么恢复出厂)

  • ai合并图层的快捷键(ai合并图层)

    ai合并图层的快捷键(ai合并图层)

  • 手机开飞行模式可以收到信息吗(手机开飞行模式会怎么样)

    手机开飞行模式可以收到信息吗(手机开飞行模式会怎么样)

  • 淘宝提前确认收货会有什么影响(淘宝提前确认收货了怎么办)

    淘宝提前确认收货会有什么影响(淘宝提前确认收货了怎么办)

  • 腾讯王卡可以开2张吗(腾讯王卡可以开副卡吗)

    腾讯王卡可以开2张吗(腾讯王卡可以开副卡吗)

  • 笔记本温度过高的后果(笔记本温度过高自动关机再也打不开了)

    笔记本温度过高的后果(笔记本温度过高自动关机再也打不开了)

  • 微信每天加多少人会被限制(微信每天加多少好友会被限制)

    微信每天加多少人会被限制(微信每天加多少好友会被限制)

  • p40华为屏幕尺寸(p40pro尺寸长宽高多少厘米)

    p40华为屏幕尺寸(p40pro尺寸长宽高多少厘米)

  • 华为开机一直循环华为logo(华为开机一直循环华为logo连电脑华为助手)

    华为开机一直循环华为logo(华为开机一直循环华为logo连电脑华为助手)

  • d3dcompiler_43.dll是什么(d3dcompiler_43.dll是哪个运行库)

    d3dcompiler_43.dll是什么(d3dcompiler_43.dll是哪个运行库)

  • 微信不在线别人拨打语音什么提示(微信不在线别人发的信息能保留几天)

    微信不在线别人拨打语音什么提示(微信不在线别人发的信息能保留几天)

  • 电话交换系统采用的是什么交换技术(电话交换系统由哪三部分组成)

    电话交换系统采用的是什么交换技术(电话交换系统由哪三部分组成)

  • 手机推不动耳机表现(手机推不动耳机怎么回事)

    手机推不动耳机表现(手机推不动耳机怎么回事)

  • 淘宝里收藏的视频在哪里(淘宝里收藏的视频)

    淘宝里收藏的视频在哪里(淘宝里收藏的视频)

  • 原彩没有了有什么影响(原彩没有就一定不是原装屏么)

    原彩没有了有什么影响(原彩没有就一定不是原装屏么)

  • 华为nova6上市时间(华为nova7pro上市时间)

    华为nova6上市时间(华为nova7pro上市时间)

  • 火山小视频和抖音是一个公司的吗(火山小视频和抖音的区别)

    火山小视频和抖音是一个公司的吗(火山小视频和抖音的区别)

  • 苹果下载为什么要按两下(苹果下载为什么需要验证)

    苹果下载为什么要按两下(苹果下载为什么需要验证)

  • 手机修改dns提高网速(手机修改dns提高性能)

    手机修改dns提高网速(手机修改dns提高性能)

  • 陌陌怎么凭昵称查找人(陌陌怎么凭昵称加好友)

    陌陌怎么凭昵称查找人(陌陌怎么凭昵称加好友)

  • 华为par-al00什么型号(华为par-al00什么型号手机壳)

    华为par-al00什么型号(华为par-al00什么型号手机壳)

  • 如何在微信上面关注移动(如何在微信上面显示自己的地址)

    如何在微信上面关注移动(如何在微信上面显示自己的地址)

  • 新版Edge浏览器开启“高占用广告隐私缓解”功能(新版edge浏览器如何打开ie浏览器)

    新版Edge浏览器开启“高占用广告隐私缓解”功能(新版edge浏览器如何打开ie浏览器)

  • 增值税发票丢失最新处理办法
  • 增值税价外费用开票内容
  • 计入存货成本的税费
  • 固定资产怎么进行折旧处理
  • 现金预算属于营业预算吗
  • 关税消费税增值税计算公式
  • 小规模简易征收计算方法
  • 企业为清算状态是什么
  • 取得的增值税专用发票能否盖付讫章
  • 分公司亏损是否也分摊所得税
  • 应交房产税通过应交税费核算吗
  • 冲销暂估材料怎么做账
  • 工会筹备金税率
  • 房地产企业用电计入什么科目
  • 土地房产税征收范围
  • 营改增后固定资产进项税抵扣规定
  • 其他综合收益影响净利润吗
  • 异地不动产租赁 深圳税务 所得税
  • 年所得12万以下还用年度申报吗
  • 其他应付款不需要支付是债务重组么
  • 管理费用怎么记忆
  • 开具红字发票后又开了蓝字发票 怎么入账
  • 专家费怎么做账没发票
  • 旧税号的发票专用章还能使用吗
  • mac如何登陆两个微信
  • 金蝶k3外购入库核算没单据
  • 月末结转损益类科目为零对吗
  • 反避税的意义
  • 固定资产减值准备影响折旧吗
  • 监事会职权范围是什么
  • 手工明细分类账本怎么记
  • php中substr_replace
  • fsmb32.exe是什么进程 作用是什么 fsmb32进程查询
  • 会计分录编制的步骤
  • 存货分类账目录填写样本图片
  • 专利权出资会计科目
  • 境外支付佣金代扣代缴增值税
  • 金税盘锁死会电子发票也开不了吗
  • 利得是什么举个例子
  • 2022年最新公务接待标准
  • 一般纳税人怎么申请纳税
  • 公司采购一直没走对公付款怎么处理
  • 一般纳税人开发票给小规模纳税人
  • 职工教育教育经费
  • 办理外经证缴税流程
  • 土地增值税可以抵扣吗
  • 企业发生待摊费会计分录
  • 运费计入什么会计分录
  • 织梦怎么添加相关
  • 以前年度多缴的税
  • 本年利润借方余额是什么意思呢
  • 企业销售收入确认条件
  • 无形资产摊销是按原值吗
  • 低值易耗品的管理流程
  • 会计学中管理费用是什么
  • 小规模纳税人转一般纳税人当月如何申报
  • 在建工程中发生的费用
  • 同一个客户有应收也有应付怎么办
  • 单位租用员工个人的车可以不收租吗
  • 青苗赔偿管理办法
  • 免抵退退税额
  • 公司开业之前产假怎么算
  • 子公司的亏损能算到母公司吗
  • 如何使用easyscan
  • centos failed to start login service
  • win7旗舰版系统激活码
  • win8系统怎么设置
  • windows8如何调用摄像头
  • windows10周年更新
  • win10系统的电脑
  • linux常用桌面环境
  • linux查看so中的函数
  • uleb128、sleb128和uleb128p1编码格式介绍
  • unity3d怎么用
  • jQuery EasyUI datagrid在翻页以后仍能记录被选中行的实现代码
  • android动画实现方式
  • 地方电子税务局是干嘛的
  • 北京市国家税务网
  • 辽宁省国家税务局官网
  • 国税局黑龙江省
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设