vue报错TypeError: Cannot read property 'XXX' of undefined

2,459 阅读1分钟

最近在搞vue项目,一步一坎坷的走过来日日夜夜。

- 黎明即起,醒后勿粘恋。

今次在开发的过程中遇到了Error in render: "TypeError: Cannot read property 'XXX' of undefined" 报错提示:

image.png

先说下我的报错场景吧:

  • vue框架,父级传值couponInfo <Object>
     <GuideStep:coupon-info="couponInfo"></GuideStep>
    
  • 子组件接受
      props: {
       couponInfo: Object,
     },
    
  • 子组件直接赋值
     <div>{{ couponInfo.advActivityInfo.prizeAmount }}</div>
    

此时发生上图报错信息

首先看到此处报错,就直接想到是数据类型出错,没有定义字段之类的,后来各种度娘后发现问题原因和解决之道:

首先传值没有问题,props接受也没问题,那么问题就发生在赋值上!

报错的原因个人感觉是数据没能在页面加载之前传进来, 不知道是否准确

处理方法在 赋值之前加个 couponInfo.advActivityInfo && 即可解决

```js
 <div>{{ couponInfo.advActivityInfo && couponInfo.advActivityInfo.prizeAmount }}</div>
```