Laravel Inertia Vue 同页提交Toast仅首次生效问题

问题根源 #

官方默认的flash渲染写法仅适配跨页跳转场景：跨页时页面组件会整体重新挂载，$page.props.flash.message作为初始值可直接渲染。但同页提交重定向回当前路由时，你之前用computed属性承载显示toast、启动自动隐藏定时器这类副作用逻辑，本身就违反了Vue computed必须为纯函数、无副作用的设计要求，才需要额外加无意义的空DOM节点强制触发计算逻辑。
另外你担心的「相同提示语多次提交不触发」问题其实不会出现：Laravel的flash消息是单次请求生效的，两次提交之间flash值会先回到空状态，再被赋值为新的提示内容，响应式系统完全可以捕获到值的变化。

具体实现代码 #

只需要修改布局组件即可，后端逻辑、表单组件逻辑都不需要调整，完全移除冗余空DOM节点。

布局模板部分 #

删掉之前的<div v-if="triggerToast"></div>冗余节点，只保留toast本身，toast内容单独存在变量里，避免直接绑定flash值导致隐藏时显示空内容：

<template>
  <!-- 原有导航、侧边栏、插槽等布局内容保持不变 -->
  <div 
    v-if="isToastActive"
    class="text-white text-2xl bg-emerald-800 z-20 p-4 max-w-sm fixed right-2 top-2 mynotif active"
  >
    {{ toastMessage }}
  </div>

  <!-- 原有页面插槽位置不动 -->
  <slot />
</template>

布局脚本部分 #

删掉之前的triggerToast计算属性，改用watch直接监听全局page对象里的flash消息变化，所有副作用逻辑（显示toast、启动隐藏定时器）都放在watch回调中执行，同时增加定时器重置逻辑，避免连续快速提交时toast提前隐藏：

<script setup>
import { Head, usePage } from '@inertiajs/inertia-vue3';
import AdminNavbar from '@/components/Navbars/AdminNavbar.vue';
import Sidebar from '@/components/Sidebar/Sidebar.vue';
import HeaderStats from '@/components/Headers/HeaderStats.vue';
import FooterAdmin from '@/components/Footers/FooterAdmin.vue';
import { ref, watch } from 'vue';

const isToastActive = ref(false);
const toastMessage = ref('');
let hideTimer = null;

// 直接监听flash消息变化，无需绑定DOM触发
watch(
  () => usePage().props.value.flash.message,
  (newMessage) => {
    // 空消息不触发toast
    if (!newMessage) return;

    // 新消息到来时先清空之前的隐藏定时器，避免连续提交时toast提前关闭
    if (hideTimer) clearTimeout(hideTimer);

    toastMessage.value = newMessage;
    isToastActive.value = true;

    // 3秒后自动隐藏toast
    hideTimer = setTimeout(() => {
      isToastActive.value = false;
      toastMessage.value = '';
    }, 3000);
  },
  { immediate: true } // 页面初始化时如果存在flash消息也直接显示
);
</script>

方案优势 #

• 无冗余DOM节点，不需要为了触发逻辑添加无实际渲染意义的空标签
• 自动处理连续提交场景，不会出现toast提前隐藏的问题
• 逻辑符合Vue3组合式API的最佳实践，副作用统一收敛在watch回调中，维护性更强
• 同时兼容跨页跳转、同页提交两种场景，不需要针对不同提交逻辑做特殊适配

内容的提问来源于stack exchange，提问作者ling