描述

在用Vue的时候出现了一个令人窒息的错误

报错显示 “avatar” 未定义，但在postman中测试返回的数据确实有“avatar”，可是为什么未找到？

然后我在控制台中打印从后台获取到的数据：

{
    "id": 3,
    "date": "2021-01-22 21:11:32",
    "organizer": {
        "id": 1,
        "avatar": "http://oss.norza.cn/imgs/avatar/organizer/1/avatar01.jpg",
        "username": "kongsama",
        "profile": "time tick away, dream faded away!",
    }
}

通常情况下，在请求之后的数据会赋值给data里边的变量，data的video中没有其他字段（属性）：

data() {
  retrun {
    video: {}
  }
}

思考

因为获取数据是异步操作，也就是页面渲染和请求操作是非同步的，页面渲染那个时候拿到的video还没有任何数据，而渲染完成之后才拿到了video数据，报错可能是数据还正在请求时发出的。

所以，将字段（属性）填充完整就可以避免Vue提示错误，字段可以选择性填充，比如在template中用哪个字段，就写哪个字段名称即可。

解决

{
    "organizer": {
        "avatar": "",
    }
}

在template中只用到了avatar，所以我就把它上层结构也写出来。如果是数组形式的，只需要写一个结构，因为后期会被覆盖掉的。

其他方案

网上还有一种解决方法是，在渲染的那层标签外套一个v-if判断字段是否存在，

明确地告诉你，这种方法是不可行的，本来页面渲染和请求操作是非同步的，页面渲染那个时候拿到的video还没有任何数据，而渲染完成之后才拿到了video数据，

所以v-if判断的对象本身就是null值，所以也会报错！