Alpine.js+Laravel(Inertia.js)闪信自动隐藏仅生效一次，如何修复？

你的核心问题是Alpine.js的show状态在第一次隐藏后没有重置，后续新Flash消息到来时，要么元素未重新渲染，要么Alpine状态未更新。结合Vue 3 + Inertia.js的技术栈，给出两种可行方案：

方案1：用Vue完全控制（推荐，状态更统一） #

既然项目已使用Vue，没必要混合Alpine状态，直接用Vue的响应式和定时器处理：

<template>
  <div v-if="isFlashVisible" class="flash-success">
    {{ $page.props.flash.successAuth }}
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'

const isFlashVisible = ref(false)
let hideTimer = null

// 监听Flash消息变化
watch(
  () => $page.props.flash.successAuth,
  (newMessage) => {
    if (newMessage) {
      // 显示消息
      isFlashVisible.value = true
      // 清除旧定时器，避免重复触发
      if (hideTimer) clearTimeout(hideTimer)
      // 3秒后隐藏
      hideTimer = setTimeout(() => {
        isFlashVisible.value = false
        // 可选：手动清除Flash，避免页面刷新后重复显示
        // $page.props.flash.successAuth = null
      }, 3000)
    } else {
      isFlashVisible.value = false
    }
  },
  { immediate: true } // 初始化时执行一次检查
)
</script>

方案2：让Alpine监听Vue的Flash状态 #

如果坚持用Alpine，需让它监听Vue的响应式Flash属性，每次新消息到来时重置show状态：

<div 
  x-data="{ show: false }"
  x-show="show"
  x-text="$page.props.flash.successAuth"
  x-init="
    const handleFlashChange = () => {
      if ($page.props.flash.successAuth) {
        show = true
        setTimeout(() => show = false, 3000)
        // 可选：清除Flash
        $page.props.flash.successAuth = null
      }
    }
    // 初始化检查
    handleFlashChange()
    // 用Vue的watch监听响应式变化（Inertia的$page是响应式对象）
    $watch(() => $page.props.flash.successAuth, handleFlashChange)
  "
></div>

关键注意点 #

1. 修正原代码的语法错误：v-if="$page.props.flash.successAuth{{ $page.props.flash.successAuth}}" 是错误写法，应改为v-if="$page.props.flash.successAuth"，否则Vue无法正确解析条件。
2. 确保Inertia的Flash消息状态能正确更新：后端触发Flash时需正确设置，Inertia会同步更新$page.props.flash。
3. 无论哪种方案，都要在新Flash到来时重置定时器，避免旧定时器干扰当前消息的显示逻辑。

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