調用的是豆瓣v2電影接口，做的是電影詳情頁。
點擊某個電影進入詳情頁發起請求。
html（頁面圖片都正常顯示出來了，但是控制臺會報錯，逼死強迫癥）
<div class="head-img">
< img : src = "movieDetail.images.medium" />
</div>
js部分
data () {
return {
movieDetail: {}
}
},
created () {
this.$http.jsonp('https://api.douban.com/v2/movie/subject/'+this.$route.params.id).then( (res) => {
this.movieDetail = res.data
}).catch(error => {
console.log( error)
})
}
QQ圖片20170602090257.png
但是如果js部分這樣寫，控制臺就不會報錯
<div class="head-img">
< img : src = "movieSrc.medium" />
</div>
data () {
return {
movieDetail: {},
movieSrc:{},
movieAka:[],
movieRating:{}
}
},
created () {
this.$http.jsonp('https://api.douban.com/v2/movie/subject/'+this.$route.params.id).then( (res) => {
this.movieDetail = res.data
this.movieSrc = res.data.images
this.movieAka = res.data.aka
this.movieRating = res.data.rating
this.$nextTick(() => {
this._initPics()
})
}).catch(error => {
console.log( error)
})
}
最后解決問題的原因是：
初始化定義的movieDetail是一個空對象。
而ajax請求是異步的，頁面在渲染的時候，數據還沒請求好，這個時候movieDetail還是一個空對象， movieDetail.images就是一個undefined，然后 movieDetail.images.medium就相當于 undefined.medium就會報錯。
后面ajax請求成功之后，movieDetail有值了，vue檢測數據變化就會更新視圖，也就能看見圖了。
后來單獨把movieSrc定義成一個空對象，在數據沒請求成功之前，空對象是不會報錯的。
