我以下面的格式从后端接收对象数组。我正在尝试获取这些数据并将其推送到JavaScript数组中,以便我可以根据我的需要在以后使用它们。
[
{
id: 1,
name: "Dr. Darrin Frami III",
email: "darrin67@example.com",
address: "42568 Cameron Cove Fritschborough, MA 86432-0749",
},
]
这是我的vuejs代码:
<script>
export default {
data(){
return {
fakeUsers: [],
fakeUser: {id: '', name: '', email: ''},
}
},
methods:{
},
mounted() {
var route = '/get-users';
this.$http.get(route).then((response)=>{
for (var i = 0; i < response.data.length; i++) {
this.fakeUser.id = response.data[i].id;
this.fakeUser.name = response.data[i].name;
this.fakeUser.email = response.data[i].email;
this.fakeUsers.push(this.fakeUser);
}
});
console.log(this.fakeUsers);
console.log(this.fakeUsers[0]);
}
}
</script>
vue-dev工具结果:
行console.log(this.fakeUsers);
的输出为[__ob__: Observer]
。不应该打印类似[Array[10]]
的内容吗?
行console.log(this.fakeUsers[0]);
的输出为undefined
,我无法弄清楚原因。
答案 0 :(得分:5)
$ http()创建一个异步ajax调用,因此{/ 1}}中的代码在后面的控制台命令后执行。
简单解决方案:将控制台命令也放入then()
中的函数中。