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);

然后后台发完请求，开开心心的去接了数据：

1 //vue中设置data变量
2 detialData{},
3 
4 //方法中接收返回数据
5 if(res.code === 0){
6   this.detialData = res.data;
7 }

下面我就在table中展示了数据：

 1 <table class="el-table el-table--fit el-table--border table-detail">
 2     <tbody>
 3         <tr>
 4             <td class="row-title">视频id</td>
 5             <td>{{detailData.video.videoId}}</td>
10         </tr>
11     </tbody>
12 </table>

然后我发现刷新后前端直接渲染不出页面了：

后台没有报错，而且前端数据已经拿到了，也没有报错，那么问题出在哪里了呢？于是我确定了是前端的问题，一步一步确认下来，我发现把videoId去掉以后，前端可以正常渲染页面，而且Dialog中可以展示数据的，但是展示的是一个实例对象，不是我想要的对象的属性：

然后，我没有刷新页面，在这个Dialog中，我又把videoId属性加上了：

id展示出来了？！wtf？？？此时我一脸懵逼，最后我在定义detailData的地方加上了video对象，这个key：

1 detailData: {
2     video: {},
3     videoList:[],
4 },

好了！问题解决了！

教训：以后展示json数据中对象的属性的时候，一定要定义好对象！

我在想，原因在哪？如果我不定义这个video，Vue就监听不到嘛？