Vue ajax request isn't updating data - vue.js

Question

I'm new to Vue but from my research this should be working. the console keeps showing users as null but when i look at the response of the request it has the users. I thought the => was supposed to update the vue instance.
...
data () {
return {
users: null,
}
},
...
methods: {
getUsers () {
this.$axios.get('/api/users')
.then(r => {
this.users = r.data
})
console.log(this.users)
},
},
...
created () {
this.getUsers()
this.users.forEach(function (u) {
...
})
}

Answer 1

If you want to loop through the collection of users, you have to first wait until they are actually available - you can use then callback for it:
export default {
data () {
return {
users: [],
}
},
methods: {
getUsers () {
return this.$axios.get('/api/users')
.then(r => {
this.users = r.data
})
.catch(error => console.log(error));
},
},
created () {
this.getUsers().then(() => {
this.users.forEach(function (u) {
...
})
})
}
}
Rather than converting returned collection from within vue component it would be better to return it formatted with the response - using plain php you could achieve it with array_map - here I'm using an array of User models as an example:
$users = array_map(function (User $user) {
return [
'value' => $user->id,
'name' => $user->name,
];
}, $users);
The above will return something like:
[
[
'value' => 1,
'name' => 'Jon Doe',
],
[
'value' => 2,
'name' => 'Jane Doe',
],
]

Answer 2

You can move your users processing to a watcher:
...
data () {
return {
users:[],
}
},
watch: {
users (users) {
if( ! this.users.length )
return;
this.users.forEach(function (u) {
...
})
},
},
...
methods: {
getUsers () {
this.$axios.get('/api/users')
.then(r => {
this.users = r.data
})
console.log(this.users)
},
},
...
created () {
this.getUsers()
}
Or if you prefer a one time processing, make it a method and call that method in the axios then():
...
methods: {
getUsers () {
this.$axios.get('/api/users')
.then(r => {
this.users = r.data
this.processUsers();
})
console.log(this.users)
},
processUsers() {
// do something with this.users
},
},