在 Vue 中使用 jsonp 的 Flickr 应用程序“无法设置未定义的 属性 'data'”

Question

我正开始使用 public Flickr 流制作一个简单的单页照片 Steam 应用程序，但到目前为止我所做的是错误

'Cannot set property 'data' of undefined'.

我的代码：

 <b-container>
    <b-row>
      <b-col>
      <p md="4" v-for="photo in Photos">{{photo.id}}</p>
      </b-col>
    </b-row>
  </b-container>
</template>

<script>
    import jsonp from "jsonp";

export default {
    name: 'PhotoFeed',
    data: function() {
        return {
            Photos: [],
            apiURL: "https://api.flickr.com/services/feeds/photos_public.gne?format=json"
        }
    },
    mounted(){
        this.getFlickrFeed();
    },
    methods: {
        getFlickrFeed(){
            let jsonp = require('jsonp');

            jsonp(this.apiURL, {name:'jsonFlickrFeed'}, function(err,data) {
                this.data = data;
                var self = this;
                if (err){
                    console.log(err.message);
                }
                else {
                    this.Photos = self.data;
                }
            });
        }
    }
}
</script>

Answer 1

您希望 var self = this 位于匿名函数定义之外，这样 this 关键字就不会被新函数覆盖；

getFlickrFeed () {
    let jsonp = require('jsonp');
    var self = this;     // now self refers to the vue component and can
    // access the Photos property in data

    jsonp(this.apiURL, { name:'jsonFlickrFeed' }, function (err,data) {

        if (err){
            console.log(err.message);
        }
        else {
            // also use self.Photos to refer to the Vue component
            self.Photos = data;
        }
    });
}

最简单的就是用箭头函数代替匿名函数：

jsonp(this.apiURL, { name:'jsonFlickrFeed' }, (err, data) => {
    if (err) {
        console.log(err.message);
    }
    else {
        this.Photos = data;
    }
})

Answer 2

您可以使用箭头函数 ()=> 并在回调上下文中使用 this，如下所示：

           jsonp(this.apiURL, {name:'jsonFlickrFeed'}, (err,data)=> {
            this.data = data;
            if (err){
                console.log(err.message);
            }
            else {
                this.Photos = this.data;
            }
        });