在调度事件和触发器上使用数据 div

Question

我有一个组件可以使用 object

调度浏览器事件

// Livewire Component Method

public function passToDashboard($dataId)
{
    $data = Model::find($dataId);
    $this->dispatchBrowserEvent('show-data', ['data' => $data]);
}

现在在我的仪表板上 blade 我有

查看

<div class="some-classes" x-data="{dataDisplay:false}">
    <div x-show="dataDisplay">
        {{-- This is where i want to use the object --}}
        {{ $data->title }}
    </div>
</div>

<script>
   window.addEventListener('show-data', data => {
    console.log(data.detail.title); // outputs title just fine
   })
</script>

问题是，如何'unhide' dataDisplay 以及如何用传递的数据显示它？谢谢！

Answer 1

您可以使用@event-name.window="dataDisplay = true"

直接在元素上监听这些事件

要获取事件数据，请使用 $event 变量，它应该在 $event.detail.data.title

下

使用 x-text 将文本添加到元素上。请参阅下面的完整示例。

所以在你的情况下：

<div class="some-classes" x-data="{dataDisplay:false, title: ''}" @event-data.window="dataDisplay = true; title = $event.detail.data.title">
  <div x-show="dataDisplay">
    <h3 x-text="title"></h3>
  </div>
</div>

可在此处找到相关文档：https://laravel-livewire.com/docs/2.x/events#browser

请注意我更改了事件名称，因为如果事件名称以“show”开头，它显然不起作用。当我更改为“event-data”或其他任何内容时，它又开始工作了。

在调度事件和触发器上使用数据 div

Using data on dispatched event and trigger div

laravel

laravel-livewire