laravel - 如何在 Livewire 重新渲染后重新初始化 AlpineJS 组件？

Question

我有一个使用 AlpineJS 隐藏的警报组件，但我希望它在 Livewire 重新呈现后再次可见。

使用 Livewire 组件显示警报

@if(Session::has('success'))
    <x-success-alert :message="Session::get('success')" />
@endif

AlpineJS 组件

<div x-data="{show: true}">
    <div x-show="show">
        <span>{{ $message }}</span>
        <button @click="show = false">&times;</button>
    </div>
</div>

Answer 1

解决方案是通过将 wire:key 添加到一个随机值来强制 Livewire 再次将该元素添加到 dom 中。

<div wire:key="{{ rand() }}">
    <div x-data="{show: true}">
        <div x-show="show">
            <span>{{ $message }}</span>
            <button @click="show = false">&times;</button>
        </div>
    </div>
</div>

通过这种方式，Livewire 将销毁旧的 dom 元素并添加重新初始化 Alpine 组件的新元素。