Основные vue.js 2 и vue-получение http-ресурса с присвоением переменной

#javascript #vue.js #vue-resource

#javascript #vue.js #vue-ресурс

Вопрос:

Я действительно изо всех сил пытаюсь заставить работать самую базовую функциональность REST vue.js 2.

Я хотел бы получить данные из некоторой конечной точки и присвоить возвращаемое значение переменной моего экземпляра Vue. Вот как далеко я продвинулся.

 var link = 'https://jsonplaceholder.typicode.com/users';
var users;

Vue.http.get(link).then(function(response){
    users = response.data;
}, function(error){
    console.log(error.statusText);
});

new Vue ({
    el: '#user-list',
    data: {
        list: users
    }
});
 

Внутри обещания я могу получить доступ к данным ответа, но, похоже, я не могу назначить его пользователям или даже данным экземпляра Vue.

Излишне говорить, что я совершенно новичок в vue.js и благодарен за любую помощь.

Стек: vue.js 2.03, vue-ресурс 1.0.3

Приветствия!

Ответ №1:

Вы можете создать объект и передать его экземпляру vue следующим образом :

 var link = 'https://jsonplaceholder.typicode.com/users';
var data = { 
    list: null 
};

Vue.http.get(link).then(function(response){
    data.list = response.data;
}, function(error){
    console.log(error.statusText);
});

new Vue ({
    el: '#app',
    data: data 
});
 

Или вы можете создать функцию в объекте методов, а затем вызвать ее в подключенной функции :

 var link = 'https://jsonplaceholder.typicode.com/users';
new Vue ({
    el: '#app',
    data: {
        list: null
    },
    methods:{
        getUsers: function(){
            this.$http.get(link).then(function(response){
                this.list = response.data;
            }, function(error){
                console.log(error.statusText);
            });
        }
    },
    mounted: function () {
        this.getUsers();
    }
});
 

Комментарии:

1. Большое вам спасибо за ваш ответ, он отлично работает! Но в чем причина такого поведения?