Can't get Livewire Events Emit and Listen to work

Question

I am trying to setup an event listener, so that when a child livewire component gets the title updated, it would refresh the parent component to show the update instead of having to hard refresh the page to see the update.

This is a quick gif showing what is taking place

• https://i.gyazo.com/faefb27c2fe0fb32da097fbbf5cc1acb.mp4

I have 2 livewire components.

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');
    }

In the child component I set this

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

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

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

        $this->resetInputFields();

        $this->emit('refreshKanbans');

       
    }

All of the files are in a subfolder called kanbans could this be breaking it?

Trying to follow along these docs https://laravel-livewire.com/docs/2.x/events

I also tried this approach with calling the emit $this->emit('updateKanbanSidebar'); and setting the listener like this protected $listeners = ['updateKanbanSidebar' => 'refreshKanbans'];

Clearly I am understanding the documentation wrong, but no clue where the issue is.

Any help is much appreciated!

Thank you in advance :)

Answer 1

I was able to get this to work using this in the child component, and skipping the emits. I was able to DD and the emit was working properly, but not sure why it wasn't updating.

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

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

        $this->resetInputFields();

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