针对这个问题我补充一下：

1. Vue把所有*.vue文件的template全部解析到了index.html的名为app的div标签内；
2. 同时template中使用了声明式渲染获取数据；
3. 由于在data内部定义的course_list还没有被真实的数据给覆盖掉，所以在声明式渲染时其实是一个空值，所以报错undefined；
4. 之后生命周期钩子进行异步操作，获取了后台的数据，并覆盖掉data的course_list，此时course_list承载了后台的数据；
5. 最后使用console.log打印，会成功显示所有数据；而在第2步中没有你使用的字段，所以在页面中才不会显示数据。

可以查看我对此问题写的播客：
https://www.cnblogs.com/kongsam/p/14483218.html

@kongsam: 如果是数组套多个对象的数据结构该如何写呢，比如[{}, {}, {}], 后台返回的是这样一个真实数据，在data中该如何写出数据结构

@python_zzy: 你数据该是啥结构就写啊

[
 {
   key1: "value1",
   key2: "value2",
   ......
 },
 {
   key3: "value3",
   key4: "value4",
   ......
 }
]

@python_zzy: 确实我遇到的问题就是这样搞的，要拿什么key就写它对应的结构出来，就不会像贴主那样的问题。

@kongsam: 后台返回的数组套对象的数据中，里面的对象是不固定数量的，只写一个就可以了吗？写数据结构我是试过的，但是跟你上面那样的写的只写一个对象的数据结构是不行的

@python_zzy: 数据套对象，对象不固定，只写一个即可。后台返回的数据会覆盖掉你事先写的结构，不用全部写完。这样做就是以免vue报错，直接拿某个key(x)不识别。

[
 {
   key1: "value1",
   key2: "value2",
   ......
 },
]

@kongsam: 好的，我明白了，谢谢

@python_zzy: 甚至你不用写完key，只写你在标签里面渲染哪个key，你就只写你要用的key即可。因为后台返回的数组是会覆盖掉之前的结构的，以及填充数据进去。

@kongsam: ok