Javascript 带变量分配的基本vue.js 2和vue资源http get
我真的很难在vue.js2中使用最基本的REST功能 我希望从某个端点获取数据,并将返回值分配给Vue实例的变量。这是我走了多远Javascript 带变量分配的基本vue.js 2和vue资源http get,javascript,vue.js,vue-resource,Javascript,Vue.js,Vue Resource,我真的很难在vue.js2中使用最基本的REST功能 我希望从某个端点获取数据,并将返回值分配给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.sta
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
}
});
在承诺中,我可以访问响应数据,但我似乎无法将其分配给用户,甚至无法分配给Vue实例的数据
不用说,我是vue.js的新手,非常感谢您的帮助
堆栈:vue.js 2.03,vue资源1.0.3
干杯 您可以创建一个对象并将其传递给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对象下创建函数,然后在mounted函数中调用它:
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();
}
});
非常感谢您的回答,它非常有效!但这种行为背后的原因是什么?