Level 58
The issue is that the errors array is not being updated when the same error occurs again. One solution is to add a unique identifier to each error message and use that to check if the error has already been displayed. Here's an example implementation:
- In your controller, add a unique identifier to each error message:
return redirect()->back()->withErrors(['email' => 'Email already taken.'])->with('errorId', uniqid());
- In your Vue component, add a data property to keep track of displayed errors:
data() {
return {
displayedErrors: []
}
}
- Update your template to check if the error has already been displayed:
<template>
<div>
<toast v-for="error in this.$page.props.errors" :key="error.id" v-if="!displayedErrors.includes(error.id)">
{{ error }}
</toast>
</div>
</template>
- In your mounted hook, add the error id to the displayedErrors array when the toast is displayed:
mounted() {
this.$nextTick(() => {
this.$refs.toast.forEach(toast => {
const errorId = toast.getAttribute('data-error-id')
this.displayedErrors.push(errorId)
setTimeout(() => {
this.displayedErrors = this.displayedErrors.filter(id => id !== errorId)
}, 5000)
})
})
}
This implementation adds a unique id to each error message and checks if it has already been displayed before showing the toast. The displayedErrors array is updated when a toast is displayed and removed when it is hidden.