<!DOCTYPE html>
<html>
<head>
<title>Welcome to Vue</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<button v-on:click="sendTime">Load</button>
<div v-for="user in users">
<p>{{ user.username }}</p>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
users: [
{ username: "billy" },
{ username: "ryan" }
],
},
methods: {
sendTime : function () {
axios.get('/api/users')
.then(function (response) {
console.log(response.data);
this.users = response.data;
})
.catch(function (error) {
console.log(error);
});
},
}
})
</script>
</body>
</html>
console.log returns -
Array [ Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, 15 more… ]
Struggling to assign the returned array to 'this.data' after button click event. Need help with data assignment issue!