Laravel Vue Inertia实现表单提交成功后显示SweetAlert提示

核心错误原因 #

你的代码里有个关键问题：if (message) 判断的是computed响应式对象本身，而非它存储的实际值。Vue 3的computed返回的是ComputedRef对象，不管内部值是否为null，这个对象始终存在，所以该判断永远为true，导致组件每次加载都会触发SweetAlert。

修复步骤 #

1. 修正判断逻辑并监听消息变化 #

把判断改为检查message.value（computed对象的实际值），同时用watch监听消息的变化，确保仅在消息出现时触发提示：

<script setup>
import { usePage } from "@inertiajs/vue3";
import { computed, watch } from "vue";

const page = usePage();
// 从Inertia共享的props中获取闪存消息
const message = computed(() => page.props.flash.message);

// 监听消息变化，当消息存在时触发SweetAlert
watch(message, (newMessage) => {
  if (newMessage) {
    Swal.fire({
      text: newMessage, // 使用后端返回的动态消息
      icon: 'success',
      toast: true,
      showConfirmButton: false,
      position: 'bottom',
      timer: 3500
    });
  }
}, { immediate: true }); // 初始化时如果已有消息也会触发（对应表单提交后的重定向场景）
</script>

2. 优化提示内容 #

原代码里SweetAlert的文本是固定的'Success!'，改为使用后端返回的newMessage，能让提示内容匹配实际操作结果。

3. 保持闪存消息的一次性特性 #

Laravel的withMessage()生成的闪存消息本身就是一次性的，只会在重定向后的第一次请求中有效。配合上述代码，用户刷新页面时session中的闪存消息已被清除，message.value会变为null，不会重复触发提示。

额外说明 #

你的HandleInertiaRequests中间件配置是正确的，无需修改：

return array_merge(parent::share($request), [
    'flash' => [
        'message' => session('message')
    ]
]);

该方案会在表单提交成功、重定向到目标页面时自动触发一次SweetAlert，且仅在此次页面加载时生效，刷新页面或其他页面切换场景不会重复触发。

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