在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問(wèn)答/HTML/ vue.js 模版報(bào)錯(cuò)

vue.js 模版報(bào)錯(cuò)

報(bào)錯(cuò)信息：
圖片描述

代碼：

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

數(shù)據(jù):
圖片描述

這樣報(bào)這個(gè)錯(cuò)，將代碼修改成以下，就正常了

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

請(qǐng)問(wèn)，為什么會(huì)導(dǎo)致這樣的

回答
編輯回答
只愛(ài)你

courseDetail默認(rèn)的值為{}
courseDetail.course為undefined
undefined不是個(gè)對(duì)象，undefined.name自然報(bào)錯(cuò)了

2017年5月29日 06:41
編輯回答
懶洋洋

改成這樣試試，若能成估計(jì)你也就懂因?yàn)槭裁戳耍?/p> 

<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);  //注意這里就行，其它都沒(méi)變
    })
  },
}
</script>
2017年3月28日 19:16
編輯回答
尐潴豬
data () {
  return {
    courseDetail: {
      course: {} // 這里初始化一下就OK
    }
  }
}
2018年5月28日 22:22