clear flash and error messages

[bmason]

Greetings

I am using laravel and vue.

I am building an SPA. Edit/insert is via popup and both flash and error messages are working fine.

Since it is on the same page, flash and error messages persist. So the next edit the same flash and error messages appear.

How can I clear flash and error messages in vue? There seems to be a react function.

[reinink]

My recommendation: use the form helper: https://inertiajs.com/forms#form-helper

It allows you to clear the form errors:

form.clearErrors()

That said, I will admit, this is tricky when it comes to flash messages, since these props don't go away just because you closed the modal. This is something that our upcoming dialog's feature will solve, since dialogs will have their own endpoints and props.

[ajnsn]

@bmason

The solution here would be an overall flash messages logic which hooks into Inertia's event system.
Examples of my success event to process the "flash" message and delete the prop afterwards.

This will sucessfully prevent duplicates, at least for the current version of Inertia.
This is not the complete code but I hope you get the idea.

import { Inertia } from '@inertiajs/inertia';
import { default as notifications } from '@/notifications';
import get from 'lodash/get';

Inertia.on('success', event => {
    const props = get(event, 'detail.page.props', {});

    if (props.notification) {
        notifications.add(props.notification);

        delete props.notification;
    }
});

[mitsyara]

I dont know if Inertia had some helper to this, but I'm thinking about putting some logic at the server that attached the timestamp to each flash message.
Ex: session()->flash('error', now()->format('YmdHis') . '*' . "Your message")

Then remove the timestamp part at frontend as key, put it in some array to display.... That way we'll have a unique key to know if it's a new error or the old one from the server.