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

如何解决在已调度事件和触发器div上使用数据

我有一个组件，该组件与对象一起调度浏览器事件

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

问题是，如何“取消隐藏” datadisplay，以及如何与传递的数据一起显示？谢谢！

解决方法

您可以使用@ event-name.window =“ dataDisplay = true”直接在元素上侦听这些事件

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

使用x文本将文本粘贴到元素上。请参阅下面的完整示例。

所以在您的情况下：

<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”开始事件名称，则显然不起作用。当我更改为“事件数据”或其他任何内容时，它再次开始工作。