make sure you are using the Livewire pagination links which emit an event, and not the regular links that are anchor tags
Livewire / Pagination / Child Component work wrong.
hi..
I found Livewire Pagination reacts wrong with children's 'emit' event..
I have Two Livewire components.
'ParentComponent' embrace 'ChildComponent' .
In ChildComponent I do something and trigger 'updated' event '
So ParentComponent grab the 'updated' event.
After grabbing event, refreshing list datatable and clicking page 2, the pagination url goes wrong.
The url path goes 'http://example.test/livewire/message/admin.tables.videos?cat_id=3&page=2' ...
actually its url was 'http://example.test/admin/videos?cat_id=3' .
It should go to 'http://example.test/admin/videos?cat_id=3&page=2' .
And It showes this error message on browser.
Symfony\Component\HttpKernel\Exception\MethodNotAllowedHttpException
The GET method is not supported for this route. Supported methods: POST.
Can someone explain what is going on ?
Check my code.
I made code simplified for easy catch.
ParentComponent.php
protected $listeners = [
'updated' =>'$refresh'
];
function render(){
$items = Item::paginate();
return view('livewire.parent', [
'items'=> $items,
]);
}
in livewire/parent.blade.php
<div>
@livewire('child-component')
@foreach ($items as $item)
<div> {{ $items->title}}</div>
@endforeach
<div >
{{ $items->appends( $_GET )->links() }}
</div>
</div>
ChildComponent.php
function render(){
return view('livewire.child');
}
function saveForm(){
// ... save data .doing something..
$this->emit('updated')
}
in livewire/child.blade.php
<form wire:submit.prevent='saveForm'> -->
<input ... />
<button type="submit" > OK </button>
</form>
Finally.
I made it working with whole page reloading not with livewire component reloading.
public $url ;
protected $listeners = [
'updated' =>'reload_page'
];
function reload_page(){
return redirect()->to($this->url);
}
function mount( ){
$this->url = url()->full();;
}
It looks ugly but no way. This is not my favorite.
I guess Livewire Pagination with child component can not get along together.
It can be big trouble.
Please or to participate in this conversation.