vue.js 模版报错

Question

报错信息：

代码：

<template>
    <div>
    <div>{{courseDetail.course.name}}</div>
        <div>{{courseDetail.courseStatus}}</div>
    </div>
</template>

<script>
import {courseDetail} from '@/api/api.js'
export default {
    data () {
        return {
      courseDetail: {}
        }
    },
  created () {
    courseDetail().then(res => {
      this.courseDetail = res.data;
    })
  },
}
</script>

数据:

这样报这个错，将代码修改成以下，就正常了

data () {
    return {
      courseDetails: '',
      courseStatus: '',
    }
  },
  created () {
    courseDetail().then(res => {
      this.courseDetails = res.data.course;
      this.courseStatus = res.data.courseStatus;
  }

请问，为什么会导致这样的

Answer 1

data () {
  return {
    courseDetail: {
      course: {} // 这里初始化一下就OK
    }
  }
}

Answer 2

改成这样试试，若能成估计你也就懂因为什么了：

<template>
    <div>
    <div>{{courseDetail.course.name}}</div>
        <div>{{courseDetail.courseStatus}}</div>
    </div>
</template>

<script>
import {courseDetail} from '@/api/api.js'
export default {
    data () {
        return {
      courseDetail: {}
        }
    },
  created () {
    courseDetail().then(res => {
      this.courseDetail = JSON.parse(res.data);  //注意这里就行，其它都没变
    })
  },
}
</script>