I am seeing the error message undefined in the console, specifically originating from the ready() function.
The issue I am encountering is related to attempting to assign the value of this.users.name to this.userForm.name.
Can someone please point out what mistake I might be making?
profile-user Component
<template>
<input type="text" v-model="userForm.name">
</template>
<script>
export default {
props: ['users'],
ready() {
this.userForm.name = this.users.name;
console.log(this.users.name);
},
data: function () {
return {
userForm: {
name: '',
email: '',
errors: [],
},
}
},
}
</script>
HTML:
<profile-user :users="users"></profile-user>
Edit:
Parent Vue
const app = new Vue({
el: 'body',
data: {
users: {}
},
ready: function() {
this.fetchUser();
},
methods: {
fetchUser: function() {
this.$http.get('/api/user').then(response => this.users = response.json());
}
},
});