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

Robin Löffel picture Robin Löffel · Oct 16, 2016 · Viewed 22k times · Source

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!

Answer

ABDEL-RHMAN picture ABDEL-RHMAN · Oct 16, 2016

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