I'm encountering an issue while working on my vue.js project.
Uncaught (in promise) TypeError: Cannot read property 'data' of undefined
Let's take a look at the code snippet where the error is happening.
In this piece of code, I am passing form data to the User class:
Login.vue
<script>
export default {
data(){
return {
form :{
email:null,
password:null
}
}
},
methods:{
login(){
User.login(this.form)
}
}
}
</script>
And here is the User class being used:
User.js
class User {
login(data){
axios.post('/api/auth/login',data)
.then(res => this.responseAfterLogin(res))
.catch(error => console.log(error.response.data))
}
}
export default User = new User();
Interestingly, the error disappeared when I directly called the login method within Login.vue without involving the User class:
Login.vue
<script>
export default {
data(){
return {
form :{
email:null,
password:null
}
}
},
methods:{
login(){
axios.post('/api/auth/login',this.form)
.then(res => console.log(res.data))
.catch(error => console.log(error.response.data))
}
}
}
</script>
Can someone explain why this difference in behavior is happening and how can I properly pass data to the User class?