从 Livewire eventDispatch 向 Alpine.js 发送消息答案

【问题标题】：Sending a message from Livewire eventDispatch to Alpine.js从 Livewire eventDispatch 向 Alpine.js 发送消息
【发布时间】：2021-09-21 12:02:39
【问题描述】：

我有一个使用 Livewire 和 Alpine.js 的 Tailwind 警报，当使用 modal-closed 事件保存新项目时会显示该警报

<div class="alert alert-success" style="display: none;" x-data="{ show : false }" x-show="show" x-on:close-modal.window="show = true">
    <p class="text-bold text-"><b>The project has been created successfully</b></p>
    <button @click="show = false" class="flex items-center p-1 ml-auto focus:outline-none">
        <svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" class="w-3 h-3 fill-current">
            <path d="M10 8.586L2.929 1.515 1.515 2.929 8.586 10l-7.071 7.071 1.414 1.414L10 11.414l7.071 7.071 1.414-1.414L11.414 10l7.071-7.071-1.414-1.414L10 8.586z">
            </path>
        </svg>
    </button>
</div>

我有一个 Livewire 组件，它触发一个模态关闭事件。

public function save()
{
    // Validating the data
    $this->validate();

    $this->dispatchBrowserEvent('close-modal', ['message' => 'Project Created']);
}

我想要的是能够在警报中显示我发送的带有dispatchBrowserEvent 的消息，而不是固定消息“项目已成功创建。”不幸的是，我还没想好怎么做。

我尝试在p 标签上使用x-text="message"，但它说

消息未定义。

【问题讨论】：

标签： javascript laravel tailwind-css laravel-livewire alpine.js

【解决方案1】：

您需要使用x-on:close-modal 监听该事件

<div x-data="{ show : false, message: '' }" 
     x-show="show" 
     x-on:close-modal.window="show = true; message = $event.detail.message">

    <p x-text="message"></p>

</div>

注意：我做了你在问题中提出的问题。但我认为当您关闭模式并且 p 位于其中时，您不会看到文本。

如果我可以建议另一种方法是发送第二个事件

$this->dispatchBrowserEvent('notify', ['message' => 'Project Created']);

并且有一个可重复使用的烤面包机以使用相同的方法显示通知。
（这是一个简单的示例）

<div x-data="{ show: false, message: '' }" 
     x-show="show" 
     x-on:notify.window="message = $event.detail.message"; setTimeout(() => { message = ''; show = false }, 2500)">

    <p x-text="message"></p>

</div>

【讨论】：