Étant donné qu'InertiaJS n'actualise pas le même composant de route, des éléments tels que les messages flash ne seront affichés qu'une seule fois, quel que soit le nombre de fois que vous transmettez le message depuis le backend. J'ai tout essayé mais rien ne fonctionne, il me suffit de pouvoir déclencher à nouveau le même message flash après avoir échoué à faire la même chose.
Contrôleur : Cela devrait être déclenché dans le cadre de ma validation via certaines instructions if, donc en gros je dis que si la quantité demandée dépasse la quantité en stock, ce message flash sera renvoyé.
return back()->with([
'error' => 'This item has only ' . $item->qty . ' items in stock'
]);
Composant Flash :
<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>
Cela fonctionne bien, le flash apparaît, prend quelques secondes puis disparaît. Mais j’ai beau cliquer plusieurs fois sur le même bouton pour recevoir ce message flash, cela n’arrive jamais et mon cerveau est sur le point d’exploser !
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Dans la documentation ici, vous devez regarder
app /Http/Middleware/HandleInertiaRequests.phpet vous assurer que vous avez quelque chose comme ça.class HandleInertiaRequests extends Middleware { public function share(Request $request) { return array_merge(parent::share($request), [ 'flash' => [ 'error' => fn () => $request->session()->get('error') ], ]); } }Fondamentalement, vous créez une propriété de données partagées appelée flash qui est un tableau associatif (objet) avec une clé de message.
Veuillez noter que si vous utilisez
with(['error => 'message here'])，您将只能在前端获取数据。如果您想要成功, vous devez également l'ajouter vous-même.Exemple de données que vous obtiendrez