I'm currently facing a problem with displaying flash messages in my Laravel Jetstream application using Inertia.js. Below is the relevant code snippet: In AppLayout.vue
<script setup>
import { usePage } from "@inertiajs/vue3";
import FlashMessage from "../Components/FlashMessage.vue";
import { ref, computed, onMounted } from "vue";
const { props: pageProps } = usePage();
const flashMessage = ref("");
const successMessage = computed(() => pageProps.flash.success);
onMounted(() => {
if (successMessage.value) {
flashMessage.value = successMessage.value;
}
});
</script>
<div class="bg-white w-full shadow relative lg:fixed lg:top-0 z-50">
<FlashMessage :success="flashMessage" />
</div>
Within the handleInertiaRequest method:
public function share(Request $request): array
{
return array_merge(parent::share($request), [
'flash' => function () use ($request) {
return [
'success' => $request->session()->get('success'),
'error' => $request->session()->get('error'),
];
},
]);
}
Inside ClaseController:
public function destroy($id)
{
$clase = Clase::find($id);
$clase->delete();
return redirect()->back()->with('success', 'Clase Eliminada Exitosamente');
}
Most aspects appear to be functioning correctly except for when the flash message redirects to the same page. It seems that the pageProps variable isn't capturing the message, even though it is received as evident by {{$page.props.flash.success}} appearing on screen when printed.
What could potentially be causing this particular issue? Your assistance would be highly appreciated!