Приложение Flickr с jsonp в Vue 'Невозможно установить свойство' data 'of undefined' - PullRequest
Новая
       7

Приложение Flickr с jsonp в Vue 'Невозможно установить свойство' data 'of undefined'

0 голосов
/ 28 ноября 2018

Я только начинаю делать простое одностраничное приложение для обработки фотографий с общедоступным потоком Flickr, но с тем, что я уже сделал, я получаю сообщение об ошибке

'Не могуустановить свойство 'данные' из неопределенного '.

Мой код: 

 <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>

Ответы [ 2 ]

0 голосов
/ 28 ноября 2018

Вы можете использовать функцию стрелки ()=> и использовать this в контексте обратного вызова следующим образом: 

           jsonp(this.apiURL, {name:'jsonFlickrFeed'}, (err,data)=> {
            this.data = data;
            if (err){
                console.log(err.message);
            }
            else {
                this.Photos = this.data;
            }
        });
0 голосов
/ 28 ноября 2018

Вы хотите, чтобы 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;
    }
})
...