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 元素并添加新的 dom 元素，从而重新初始化 Alpine 组件。

Answer 2

以防万一这对其他人有帮助，我发现如果从 dom 中删除 Livewire 组件中的 alpine 组件，如果将

x-data

指令应用于最外层元素，则在恢复时它不会正确加载。

因此，例如，只需将

<x-success-alert>

组件包装在另一个 div 中：

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

Answer 3

如果我希望这种情况在一个页面上多次发生怎么办？您添加wire:key的建议确实可以使其工作，但它只能工作一次，livewire组件的后续更新不起作用，我该如何解决这个问题？