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