问题描述

控制台报错：

在控制台打印拿到的数据：

{
    "id": 3,
    "organizerId": 1,
    "date": "2021-01-22 21:11:32",
    "url": "http://www.kongsama.cn/videos/%E8%B1%AA%E8%B5%8C%E4%B9%8B%E6%B8%8AXX%2002.mp4",
    "title": "狂赌之渊xx 第02集",
    "profile": "良家子女聚集的名门学校，私立百花王学园。君临这所被赌博所支配的学园顶点的是，支配弱者的人生、甚至对政界财界都拥有影响力的绝对支配者，学生会。然而，学生会长桃喰绮罗莉，突然宣言了学生会的解散及总选举。",
    "type": "番剧",
    "playNum": 150,
    "videoComment": null,
    "organizer": {
        "id": 0,
        "date": null,
        "avatar": "http://oss.norza.cn/imgs/avatar/organizer/1/avatar01.jpg",
        "username": "kongsama",
        "password": null,
        "profile": "time tick away, dream faded away!",
        "fans": 100
    }
}

问题原因

HTML已经完成渲染DOM节点的工作，但是由于声明周期钩子函数在此时进行了异步操作，同时我在template中使用声明式渲染获取数据，就会出现找不到或未定义的异常。

解决方案

解决方案一：写全数据结构

如果在项目中的数据结构是这样的：↓↓↓

{
    "id": 0,
    "organizerId": 0,
    "date": "",
    "url": "",
    "title": "",
    "profile": "",
    "type": "",
    "playNum": 0,
    "videoComment": '',
    "organizer": {}
}

那么就把organizer的数据结构写全，然后再拿则不会报错。

解决方案二：在标签中加上v-if判断此数据是否为空。