基本的vue.js 2和vue-resource http得到变量赋值

时间:2016-10-16 10:53:19

标签: javascript vue.js vue-resource

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

我想从某个端点获取数据并将返回的值分配给我的Vue实例的变量。这是我有多远。

free( d );

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

毋庸置疑,我对vue.js全新,并感谢任何帮助。

Stack:vue.js 2.03,vue-resource 1.0.3

干杯!

1 个答案:

答案 0 :(得分:19)

您可以创建一个对象并将其传递给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();
    }
});