无法让 Livewire Events Emit 和 Listen 正常工作

Can't get Livewire Events Emit and Listen to work

我正在尝试设置一个事件侦听器,以便当 child livewire 组件更新标题时,它会刷新 parent 组件以显示更新,而不必硬刷新查看更新的页面。

这是一个显示正在发生的事情的快速 gif

我有 2 个带电组件。

Parent = ViewSidebar.php / view-sidebar.blade.php

// view-sidebar.blade.php
@foreach ($kanbans as $kanban )
   @livewire('kanbans.show-sidebar-kanban', ['kanban'=>$kanban], key($kanban->id))
@endforeach

// ViewSidebar.php
public $kanbans;

protected $listeners = ['refreshKanbans'];
  
public function refreshKanbans()
    {
        $this->kanbans = Kanban::where('status', $this->active)
                            ->orderBy('order', 'ASC')
                            ->get();
    }

public function mount()
    {
        $this->refreshKanbans();
    }

public function render()
    {
        return view('livewire.kanbans.view-sidebar');
    }

在 child 组件中我设置了这个

public function updateKanban($id)
    {
        $this->validate([
            'title' => 'required',
        ]);

        $id = Kanban::find($id);

        if ($id) {
            $id->update([
                'title' => $this->title,
            ]);
        }

        $this->resetInputFields();

        $this->emit('refreshKanbans');

       
    }

所有文件都在一个名为 kanbans 的子文件夹中,这会破坏它吗?

尝试遵循这些文档https://laravel-livewire.com/docs/2.x/events

我也尝试过这种方法,调用 emit $this->emit('updateKanbanSidebar'); 并像这样设置侦听器 protected $listeners = ['updateKanbanSidebar' => 'refreshKanbans'];

显然我对文档的理解有误,但不知道问题出在哪里。

非常感谢任何帮助!

提前谢谢你:)

你的代码有问题,让我帮你解决。从 child 发出后(确保这一切正常)只需要在 parent component

中有这个

Parent

protected $listeners = ['refreshKanbans' => '$refresh'];
  
public function render()
    {
        $this->kanbans = Kanban::where('status', $this->active)
                            ->orderBy('order', 'ASC')
                            ->get();
        return view('livewire.kanbans.view-sidebar');
    }

让我知道

我能够在子组件中使用它并跳过发射来让它工作。我能够 DD 并且 emit 工作正常,但不确定为什么它没有更新。

public function updateKanban($id)
    {
        $this->validate([
            'title' => 'required',
        ]);

        $this->kanban->update(['title' => $this->title]);

        $this->resetInputFields();

        $this->kanban=Kanban::find($this->kanban->id);
       
    }