Vue --- remember once json data acquired by {{}} - page rendering is not out of the pit

Two days ago, when children encounter a work Vue question, let me complete this dish chicken scratching their heads, requirements are as follows: click on the front page of the table a row detail button will pop up a Dialog, then the Dialog has tab tab then there are specific table to show detailed information related to the query based on the id table gives other details.

Since the time associated with other tables, id some other table's primary key, and some are not. Is the primary key, then check out is an instance of an object, non-primary key query words out of a list, whether it is an instance of an object and list, I use the map back to them all put into it.

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

Then backstage finished request, happy to pick up the data:

. 1  // VUE provided data variable 
2  detialData {},
 . 3  
. 4  // process the received return data 
. 5  IF (res.code === 0 ) {
 . 6    the this .detialData = res.data;
 . 7 }

Here I will show the data in the 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>

Then I found no direct rendering refresh the front page of:

Not being given back, and front-end data've got, there is no error, then where is the problem of it? So I'm sure the front-end problems, step by step to confirm down, I found that after the videoId removed, the front end can properly render the page, and Dialog can display data, but show an instance of an object, the object is not what I want Attributes:

Then, I did not refresh the page, in this Dialog, I again videoId property added:

id show out? ! wtf? ? ? At this point I look ignorant force, and finally I defined detailData place plus a video object, and this key:

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

All right! The problem is solved!

Lessons: After the display attribute data in json object, they must be well defined objects!

I think the reason? If I do not define this video, Vue will not listen Well?