vue-resource获取数据绑定src属性报错【已解决】

Posted 2023-03-21

参考技术A 调用的是豆瓣v2电影接口，做的是电影详情页。
点击某个电影进入详情页发起请求。
html（页面图片都正常显示出来了，但是控制台会报错，逼死强迫症）

js部分

但是如果js部分这样写，控制台就不会报错

最后解决问题的原因是：

初始化定义的movieDetail是一个空对象。
而ajax请求是异步的，页面在渲染的时候，数据还没请求好，这个时候movieDetail还是一个空对象， movieDetail.images就是一个undefined，然后 movieDetail.images.medium就相当于 undefined.medium就会报错。
后面ajax请求成功之后，movieDetail有值了，vue检测数据变化就会更新视图，也就能看见图了。
后来单独把movieSrc定义成一个空对象，在数据没请求成功之前，空对象是不会报错的。

例子：Vue 配合 vue-resource 从接口获取数据

vue-resource 是 vue 的一个与服务器端通信的 HTTP 插件，用来从服务器端请求数据。

结合例子——图片列表来写一下 Vue获取接口数据。

html ：

<div id="app">
    <ul>
        <li>
            <img v-for="imgItem in imgList" v-bind:src="imgItem.img" alt="" width="100%" height="100%"/>
        </li>
    </ul>
</div>

vue ：

var vm = new Vue({
        el:‘#app‘,
        data: {
            imgList:[],
            getImgUrl: ‘‘    //这里写接口地址
        },
        created: function(){
            this.getImg()              //定义方法
        },
        methods: {
            getImg: function(){
                var that = this;
                that.$http({           //调用接口
                    method:‘GET‘,
                    url:this.getImgUrl   //this指data
                }).then(function(response){  //接口返回的数据
                    this.imgList=response.data; // promise的then成功之后，将response返回的数据data，保存到imgList数组里
                },function(error){
                    console.log(error);
                })
            }
        }
    })