I am facing an issue with returning an array of notifications from my backend. I have a simple wizard form that displays success messages using Toastification. Here is how it looks:
this.$toast({
component: ToastificationContent,
props: {
title: 'Product Added',
icon: 'PlusIcon',
variant: 'success',
},
})
This works perfectly fine for success messages. However, I encounter a problem when trying to display an array of error messages. The errors returned by my backend look like this:
{
"response": false,
"message": [
"The sku has already been taken.",
"The slug has already been taken."
]
}
I need to extract these messages and show them to the client. I attempted the following approach:
.catch(error => {
console.log(error.response.data.message)
error.response.data.message.map(function(value, key) {
this.$toast({
component: ToastificationContent,
props: {
title: 'Something bad happened',
text: 'Here should be the message from the array. How can I retrieve it?',
icon: 'XIcon',
variant: 'danger',
},
})
});
});
However, whenever I try to use this method, it shows an error:
TypeError: Cannot read property '$toast' of undefined
Do you have any suggestions on how to solve this issue?