解决vue中Error in render: “TypeError: Cannot read property ‘avatar‘ of undefined“

前言：

很多前端的入门小白经常遇到,明明已经从后端获取数据并前端接收到数据了但是渲染数据的时候老是报某个字段undefined ,本人也是小白一名所以记录自己结合网上解决的方案总结一下

---

问题描述：

例如:这是我们后端返回的数据:

  postInfo:{
      "id": 120,
      "userInfo": {
        "uid": 23,
        "nickname": "好好好",
        "avatar": "http://qny.ztit.cc/c0be2a2f27734986ad4906bd8a2c4a8e.png",
        "sex": "0",
        "phone": "18074900125",
        "birthday": "2010-06-01",
        "gradeId": 1,
        "beated": false
      }
    }

前端定义: postInfo:null 接送收在页面渲染数据后报错

Error in render: "TypeError: Cannot read property 'avatar' of undefined"

原因分析：

我们从后端获取的数据是一个异步请求的异步数据所以前端在渲染前只初始数据postInfo第一层数据而userInfo第二层的数据还是null,也就是说  postInfo.userInfo 为null 所以会报TypeError: Cannot read property 'avatar' of undefined

---

解决方案：

目前有两种解决的方案:

第一种方案

<image v-if="postInfo.userInfo"  :src="postInfo.userInfo.avatar" />

在数据挂在前用v-if判断数据是否存在在进行渲染,但是这个方法有一个缺点就是,当你有很多地方用到第二层数据时候就要多处进行判断同时对会页面加载性能有影响

第二种方案

postInfo: { 
		   userInfo: {},
		  }

前端定义与后端返回的多层结构来接收数据