为了账号安全,请及时绑定邮箱和手机立即绑定

vue-resource获取数据绑定src属性报错

vue-resource获取数据绑定src属性报错

安静的沙漠 2017-06-02 09:09:37
我调用的是豆瓣v2电影接口,做的是电影详情页。点击某个电影进入详情页发起请求。html(页面图片都正常显示出来了,但是控制台会报错)<div class="head-img">   <img :src="movieDetail.images.medium"/> </div>jsdata () {   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)   }) }但是如果js部分我这样写,就不会报错,为什么?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)   }) }
查看完整描述

1 回答

已采纳
?
woshiajuana

TA贡献211条经验 获得超152个赞

原因很简单,你初始化定义movieDetail是一个空对象

ajax请求是异步的,也就是说,页面在渲染的时候,你的数据还没请求好,这个时候你的movieDetail还是一个空对象,

这个时候 movieDetail.images就是一个undefined,然后你 movieDetail.images.medium就相当于 undefined.medium就会报错。

后面ajax请求成功之后,movieDetail有值了,vue检测数据变化就会更新视图,你也就能看见图了

你后面写成那个样子,单独把movieSrc定义成一个空对象,在数据没请求成功之前,空对象是不会报错的


查看完整回答
4 反对 回复 2017-06-02
  • 1 回答
  • 0 关注
  • 3112 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信