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

 ̄綄美尐妖づ 提交于 2019-12-30 03:06:10

问题


I'm really struggling to get the most basic REST functionality to work in vue.js 2.

I'd like to get data from some endpoint and assign the returned value to a variable of my Vue instance. Here's how far I got.

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

Inside the promise, I can access the response data, but I cannot seem to assign it to users or even to data of the Vue instance.

Needless to say, I'm completely new to vue.js and thankful for any help.

Stack: vue.js 2.03, vue-resource 1.0.3

Cheers!


回答1:


You can create an object and pass it to the vue instance like that :

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

Or you can create a function under the methods object and then call it in the mounted function :

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


来源:https://stackoverflow.com/questions/40069455/basic-vue-js-2-and-vue-resource-http-get-with-variable-assignment

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!