调用的是豆瓣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定义成一个空对象，在数据没请求成功之前，空对象是不会报错的。
