使用已调度事件和触发 div 的数据答案

【问题标题】：Using data on dispatched event and trigger div使用已调度事件和触发 div 的数据
【发布时间】：2020-10-23 18:11:31
【问题描述】：

我有一个使用对象调度浏览器事件的组件

// Livewire Component Method

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

现在在我的仪表板刀片视图中，我得到了

<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>

问题是，如何“取消隐藏”数据显示以及如何使用传递的数据显示它？谢谢！

【问题讨论】：

标签： laravel laravel-livewire

【解决方案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”开头的活动名称显然不起作用。当我更改为“事件数据”或其他任何内容时，它又开始工作了。

【讨论】：