[Vuejs]-Flickr app with jsonp in Vue 'Cannot set property 'data' of undefined'

by

2👍

✅

You want var self = this to be outside the anonymous function definition so this keyword is not shadowed by the new function;

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;
        }
    });
}

The simplest is to use an arrow function instead of an anonymous function:

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

1👍

You could use arrow function ()=> and use this in the callback context as follows :

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

Leave a comment