Trigger a function when Inertia Page prop changed

Hi guys,

So basically, I am trying to display notification, and it works when I update the Community because it goes from the url "/communities/11/edit" to the url "/communities", but as the Delete button is in the "/communities" page, when I delete it, it won't trigger that onMounted() on my layout because it is not remounting the page.

I want something to trigger that notify when the message is changed, I have been messing arround with Vue Watchers but couldn't make it to work.

I would be glad if someone can help with this.

Repo https://github.com/jonaspauleta/reddit-clone

HandleInertiaRequests.php File

Layout File

Controller File

jonaspauleta

3 years ago

Level 3

I have solved my issue with the following code, but I guess that this might not be the right way, tell me please.

onMounted(() => {
    showNotification();
})

onUpdated(() => {
    showNotification();
})

const showNotification = () => {
    const message = usePage().props.value.flash.message == null ? '' : usePage().props.value.flash.message;
    usePage().props.value.flash.message = '';
    
    if (message !== '') {
        notify({
            group: "success",
            title: "Success",
            text: message
        }, 2500);
    }
}

Please or to participate in this conversation.