位置: IT常识 - 正文

[Vue warn]: Error in render: “TypeError: Cannot read properties of undefined(reading“category1Name“

编辑:rootadmin

推荐整理分享[Vue warn]: Error in render: “TypeError: Cannot read properties of undefined(reading“category1Name“,希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:,内容如对您有帮助,希望把文章链接给更多的朋友!

明明页面正常显示,但是控制台却一直报 如下 错误

 [Vue warn]:渲染错误:"TypeError:无法读取未定义的属性(读取'category1Name')" 中发现的

 Detail 的 vuex 仓库 

import { reqDetail } from "@/api"export default{ actions:{ async getDetail({commit},skuId){ const result = await reqDetail(skuId) console.log(result) if(result.code == 200){ commit("GETDETAIL", result.data) } } }, mutations:{ GETDETAIL(state,value){ state.DetailList = value } }, state:{ DetailList:{} }, getters:{ categoryView(state){ return state.DetailList.categoryView }, }}

可以看出 DetailList 是通过发送请求获取到的数据,而这个数据,当请求没有返回数据的时候初始状态是一个空的对象或者是数组 

通过 getters 将 DetailList 中的数据提取出来,方便使用

[Vue warn]: Error in render: “TypeError: Cannot read properties of undefined(reading“category1Name“

在组件中使用 categoryView 数据

<div class="conPoin"> <span v-show="categoryView.category1Name" >{{categoryView.category1Name}}</span> <span v-show="categoryView.category2Name" >{{categoryView.category2Name}}</span> <span v-show="categoryView.category3Name" >{{categoryView.category3Name}}</span></div>computed:{ ...mapGetters(['categoryView'])}

会报开头错误

原因:假设我们网络故障,导致DetailList的数据没有请求到,即DetailList是一个空的对象,当我们去调用getters中的return state.DetailList.categoryView时,因为DetailList为空,所以也不存在categoryView,即我们getters得到的categoryView为undefined。所以我们在html使用该变量时就会出现没有该属性的报错。

即:网络正常时不会出错,一旦无网络或者网络问题就会报错。

解决:

categoryView(state){ return state.DetailList.categoryView || {} },

 在返回值后面 加一个 || ,当属性值为 undefined 时,会返回 || 后面的数据 ,这样就不会报错

如果返回值是对象 后面就加 || { }

如果返回值是数组 后面就加 || [ ]

这个错误不会影响页面,但是起码要明白警报的原因

如果在组件中使用初始可能为空的数据,也可以根据返回的数据类型用一个空的数组或者对象兜底

<template> <div class="spec-preview"> <img :src="imgObj.imgUrl"/> <div class="event"></div> <div class="big"> <img :src="imgUrl" /> </div> <div class="mask"></div> </div></template><script> export default { name: "Zoom", props: ["skuImageList"], computed:{ imgObj(){ return this.skuImageList[0] || {} } } }</script>

或者直接判断 当这个数据有值时才显示

<template> <div class="spec-preview"> <img :src="skuImageList[0].imgUrl" v-if="skuImageList"/> <div class="event"></div> <div class="big"> <img :src="skuImageList[0].imgUrl" v-if="skuImageList"/> </div> <div class="mask"></div> </div></template><script> export default { name: "Zoom", props: ["skuImageList"] }</script>
本文链接地址:https://www.jiuchutong.com/zhishi/297419.html 转载请保留说明!

上一篇:前端网页设计必逛的六个宝藏网站(非常值得收藏)(前端网页设计的三大技术)

下一篇:手拉手教您Linux搭建web(linuxulator)

  • 苹果11nfc感应在哪唤醒(iphone11 nfc感应)

    苹果11nfc感应在哪唤醒(iphone11 nfc感应)

  • 魅族18s是什么处理器(魅族18s是三零吗)

    魅族18s是什么处理器(魅族18s是三零吗)

  • iqoo8屏幕分辨率(iqoo8屏幕分辨率在哪调)

    iqoo8屏幕分辨率(iqoo8屏幕分辨率在哪调)

  • 微信别人撤回的图片怎么才能看到(微信别人撤回的消息怎么查看)

    微信别人撤回的图片怎么才能看到(微信别人撤回的消息怎么查看)

  • 描述文件无法移除(描述文件无法移除手机会不会中毒)

    描述文件无法移除(描述文件无法移除手机会不会中毒)

  • 苹果11复制粘贴怎么设置(苹果11复制粘贴怎么取消)

    苹果11复制粘贴怎么设置(苹果11复制粘贴怎么取消)

  • 能量球开小差什么意思(能量球怎么有2kg)

    能量球开小差什么意思(能量球怎么有2kg)

  • iphone11呼叫转移设置不了(iphone11呼叫转移怎么关掉)

    iphone11呼叫转移设置不了(iphone11呼叫转移怎么关掉)

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

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

  • 微信好友显示用户已退出(微信好友显示用户已退出什么意思)

    微信好友显示用户已退出(微信好友显示用户已退出什么意思)

  • gt740显卡性能(gt740显卡性能玩lol)

    gt740显卡性能(gt740显卡性能玩lol)

  • 网易云音乐为什么下载不了(网易云音乐为什么改不了用户名)

    网易云音乐为什么下载不了(网易云音乐为什么改不了用户名)

  • 手机开关键失灵是什么原因(vivo手机开关键失灵)

    手机开关键失灵是什么原因(vivo手机开关键失灵)

  • qq可以分身可以分三个吗(qq分身可以升等级吗)

    qq可以分身可以分三个吗(qq分身可以升等级吗)

  • 关闭超线程可以提升单核性能吗(关闭超线程可以提升降低功耗吗)

    关闭超线程可以提升单核性能吗(关闭超线程可以提升降低功耗吗)

  • b站头像挂件怎么不显示(b站头像挂件怎么取消)

    b站头像挂件怎么不显示(b站头像挂件怎么取消)

  • nova5pro卡槽在哪里(nove5pro卡槽在哪)

    nova5pro卡槽在哪里(nove5pro卡槽在哪)

  • qq空间怎么发十分钟视频(qq空间如何发)

    qq空间怎么发十分钟视频(qq空间如何发)

  • 苹果8p是什么基带(苹果8plus是什么基带哪个好)

    苹果8p是什么基带(苹果8plus是什么基带哪个好)

  • 网站更新需要注意的问题(网站信息更新要求)

    网站更新需要注意的问题(网站信息更新要求)

  • 网易云拉黑对方会怎样(网易云拉黑对方会取消关注吗)

    网易云拉黑对方会怎样(网易云拉黑对方会取消关注吗)

  •  oppor17怎么连接电脑传文件(oppor17怎么连接蓝牙耳机连不上)

    oppor17怎么连接电脑传文件(oppor17怎么连接蓝牙耳机连不上)

  • 花呗投诉能退款吗(花呗订单投诉有用吗?)

    花呗投诉能退款吗(花呗订单投诉有用吗?)

  • Windows7系统台式电脑调节屏幕亮度的方法(台式机用win7)

    Windows7系统台式电脑调节屏幕亮度的方法(台式机用win7)

  • MediaAccK.exe是什么进程 有什么用 MediaAccK进程查询(mediacachefiles什么意思)

    MediaAccK.exe是什么进程 有什么用 MediaAccK进程查询(mediacachefiles什么意思)

  • 哪些产品享受教育优惠
  • 建筑公司租赁费会计分录
  • 公款私存个人账户怎么处理
  • 递延收益怎么交企业所得税
  • 价内税是指
  • 开业赠送礼品会计属于什么费用
  • 企业收到普通发票开错税率跨月重开后咋入账
  • 将债务转为资本会引起负债总额发生变动吗
  • 银行利息收入可以开增值税专用发票
  • 增值税专用发票有效期是多长时间
  • 增值税发票价税合计是什么意思
  • 代开专票怎么做账?
  • 房产税要来了!租金也要交,最高达到12%
  • 企业财务内部控制的主要内容有哪些
  • 帐外资产 如何记账
  • 工商营业年报怎么做
  • 结转固定资产净收益8万元
  • 展厅设计费用计什么科目
  • 所有者权益为什么是负债
  • 员工旅游计入什么费用
  • 个体户能给自己交五险吗
  • 企业支付微信认证怎么弄
  • 旅客购买电子客票
  • 安全生产费用怎么支出
  • win10开机黑屏几秒
  • incorrect email format
  • 委托外单位加工发出的材料分录
  • pos机未入账怎么回事
  • 提取的坏账准备怎么算
  • 苹果14数据线
  • 智能路由器五个灯一直闪
  • 企业购入固定资产要交印花税吗
  • 以前年度未入账固定资产账务处理
  • 现金流量表的编报时间有
  • 持有至到期投资在资产负债表怎么填
  • mac快捷切换
  • Pytorch深度学习实战3-6:详解网络骨架模块nn.Module(附实例)
  • unet bn
  • 固定资产折完了怎么办
  • 税务清算后还需要报税吗
  • python中类方法有什么用
  • 织梦网站老是被挂马
  • mysql百万级数据分页查询优化
  • mysql查看创建表代码
  • 存货的成本包括哪几项
  • 扣除公积金分录
  • 发票已认证未抵扣,开红字发票信息表后,愿票需要退回吗
  • 珠宝首饰可以开发票吗
  • 递延收益的摊销时点
  • 增值税申报表填写顺序
  • 企业哪些进项税抵扣
  • 幼儿园财务科目明细表
  • 无法收回的应收账款可以税前扣除吗
  • 捐赠纳税调整额怎么算
  • 海关完税凭证如何取得
  • 企业资金占用费利率
  • 知识产权fa
  • 私募基金公司收入高吗
  • 更换公司新公章流程
  • 补交增值税如何入账
  • 期间费用包括哪些费用
  • sql常见的数据类型有哪些
  • sqlserver获取当天零点时间
  • mysql常用关键字及其用法
  • mac应用图标不见了怎么办
  • 苹果mac系统如何升级最新版本
  • unetbootin教程
  • u盘里装pe系统
  • scrnsave.exe
  • jquery九宫格抽奖
  • opengl编程实例
  • unity3d基础操作
  • JavaScript中的math.pi
  • 谈谈对人才是第一资源的理解
  • 无自然人登记信息是怎么回事
  • 地方税务局受谁领导
  • 契税计税依据含装修费吗
  • steam 申请
  • 税务局的纳税服务有哪些
  • 公司地税申报
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设