I am encountering a challenge when trying to access the data property within the function. Despite my efforts, I seem to be missing something crucial and unable to pinpoint what it is.
Here is my class:
export default {
name: "Contact",
components: {
FooterComponent: FooterComponent,
NavigationComponent: NavigationComponent
},
data() {
return {
locale: Cookie.get('locale'),
nameAndLastName: '',
email: '',
subject: '',
message: '',
showPopUp: false
}
},
methods: {
sendEmail(e) {
e.preventDefault();
this.$validator.validateAll();
if (!this.$validator.errors.any()) {
let params = new URLSearchParams();
params.append('nameAndLastName', this.nameAndLastName);
params.append('email', this.email);
params.append('subject', this.subject);
params.append('message', this.message);
axios.post(this.$apiUrl + `rest/api/public/Contact/contact`, params, {
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
})
.then(function (response) {
if (response.statusText === 'OK') {
console.log(this.showPopUp);
this.showPopUp = true;
}
})
.catch(function (error) {
console.log(error);
// This throws error TypeError: Cannot read property 'showPopUp' of undefined
});
}
}
},
mounted: function () {
console.log('test');
console.log(this.showPopUp);
},
}
My issue arises when attempting to send a message. Although the response indicates success, and the email is sent, I continue to encounter the error
TypeError: Cannot read property 'showPopUp' of undefinedIf you require any additional information, please do not hesitate to reach out. Thank you!