I use nested components like so:
Blade:
<ul>
@foreach($notes as $note)
<li>
<livewire:note :note="$note" :key="$note->id" />
</li>
@endforeach
</ul>
Component:
class NotesList extends Component
{
public Collection $notes;
public int $someId;
public $listeners = [
'notes:update' => 'loadNotes',
'notes:remove' => 'loadNotes',
'notes:create' => 'loadNotes'
];
public function mount(int $someId): void
{
$this->someId= $someId;
$this->loadNotes();
}
public function loadNotes(): void
{
$this->notes = Note::where('some_id', $this->someId)->latest('date')->get();
}
public function render(): View
{
return view('livewire.notes-list');
}
}
The child component emits a create, update and remove event. I want the list to refresh, when such event is emitted. In my example above this works perfectly for the create and remove event. However for the update event it is not working. The note is not refreshing in the list. When I dd($this->notes) in loadNotes, $this->notes actually has all the changes, but the view is not re-rendered.
Why is that so?