Vue---記一次通過{{}}獲取json數據-頁面渲染不出來的坑

前兩天干活兒的時候碰到一個Vue的問題，讓我這個菜雞完全摸不到頭腦，需求如下：前端頁面點擊表格中的某一行的詳情按鈕，會彈出一個Dialog，然后Dialog中有選項卡，選項卡中再有具體的table來展示詳細的信息，根據id來關聯查詢其他表給出詳細信息。

由於關聯別的表的時候，id有的是別的表的主鍵，有的不是。是主鍵的話查詢出來的是一個實例對象，非主鍵的話查詢出來的是一個list，不管是實例對象和list，后台我用的map來將他們都put了進去。

map.put("video",videoEntity);
map.put("videoList",videoList);
return R.ok().put("data", map);

然后后台發完請求，開開心心的去接了數據：

//vue中設置data變量
detialData{},

//方法中接收返回數據
if(res.code === 0){
  this.detialData = res.data;
}

下面我就在table中展示了數據：

<table class="el-table el-table--fit el-table--border table-detail">
    <tbody>
        <tr>
            <td class="row-title">視頻id</td>
            <td>{{detailData.video.videoId}}</td>
        </tr>
    </tbody>
</table>

然后我發現刷新后前端直接渲染不出頁面了：

后台沒有報錯，而且前端數據已經拿到了，也沒有報錯，那么問題出在哪里了呢？於是我確定了是前端的問題，一步一步確認下來，我發現把videoId去掉以后，前端可以正常渲染頁面，而且Dialog中可以展示數據的，但是展示的是一個實例對象，不是我想要的對象的屬性：

然后，我沒有刷新頁面，在這個Dialog中，我又把videoId屬性加上了：

id展示出來了？！wtf？？？此時我一臉懵逼，最后我在定義detailData的地方加上了video對象，這個key：

detailData: {
    video: {},
    videoList:[],
},

好了！問題解決了！

教訓：以后展示json數據中對象的屬性的時候，一定要定義好對象！

我在想，原因在哪？如果我不定義這個video，Vue就監聽不到嘛？