基本的vue.js 2和vue-resource http得到變量賦值

Question

我真的很難在vue.js 2中使用最基本的REST功能。

我想從某個端點獲取數據並將返回的值分配給我的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
    }
});

在promise中，我可以訪問響應數據，但我似乎無法將其分配給用戶甚至是Vue實例的數據。

毋庸置疑，我對vue.js全新，並感謝任何幫助。

Stack：vue.js 2.03，vue-resource 1.0.3

干杯!

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

或者您可以在methods對象下創建一個函數，然后在掛載的函數中調用它：

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