Basic vue.js 2和vue-resource http get带变量赋值

Question

我真的很难让最基本的 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
    }
});

在 promise 中，我可以访问响应数据，但我似乎无法将其分配给用户，甚至无法分配给 Vue 实例的数据。

不用说，我是 vue.js 的新手，感谢您的帮助。

堆栈：vue.js 2.03，vue 资源 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();
    }
});

Basic vue.js 2和vue-resource http get带变量赋值

Basic vue.js 2 and vue-resource http get with variable assignment

javascript

vue.js

vue-resource