Oleh kerana InertiaJS tidak memuat semula komponen laluan yang sama, perkara seperti mesej kilat hanya akan dipaparkan sekali tidak kira berapa kali anda menghantar mesej dari hujung belakang. Saya telah mencuba segala-galanya tetapi tiada apa-apa yang berjaya, yang saya perlukan ialah dapat mencetuskan mesej kilat yang sama sekali lagi selepas gagal melakukan perkara yang sama.

Pengawal: Ini harus dicetuskan sebagai sebahagian daripada pengesahan saya melalui beberapa penyata if, jadi pada asasnya saya mengatakan bahawa jika kuantiti yang diminta melebihi kuantiti stok, mesej kilat ini akan dikembalikan.

                    return back()->with([
                        'error' => 'This item has only ' . $item->qty . ' items in stock'
                    ]);

Komponen denyar:

<script setup>
import { ref, onMounted } from "vue";
defineProps({
    message: Object,
});

const showNotif = ref(false);

let msgs = ref([]);

onMounted(() => {
    showNotif.value = true;
    setTimeout(() => {
        showNotif.value = false;
    }, 6000);
});
</script>

<template>
    <div>
        <Transition
            mode="out-in"
            name="flash"
            tag="div"
            enter-active-class="animate__animated animate__fadeInUp"
            leave-active-class="animate__animated animate__fadeOutDown"
            appear
        >
            <p
                v-if="message.error && showNotif"
                class="cursor-pointer fixed bottom-3 right-3 bg-red-600 px-5 py-1 font-semibold text-white rounded-xl"
            >
                {{ message.error }}
            </p>
        </Transition>
        <Transition
            mode="out-in"
            name="flash"
            tag="div"
            enter-active-class="animate__animated animate__fadeInUp"
            leave-active-class="animate__animated animate__fadeOutDown"
            appear
        >
            <p
                v-if="message.success && showNotif"
                class="cursor-pointer fixed bottom-3 right-3 bg-green-600 px-5 py-1 font-semibold text-white rounded-xl"
            >
                {{ message.success }}
            </p>
        </Transition>
    </div>
</template>

Ini berfungsi dengan baik, denyar muncul, mengambil masa beberapa saat dan kemudian hilang. Tetapi tidak kira berapa kali saya mengklik butang yang sama untuk mendapatkan mesej kilat ini, ia tidak pernah berlaku dan otak saya akan meletup!