Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

binggle's avatar

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>

0 likes
8 replies
Snapey's avatar

make sure you are using the Livewire pagination links which emit an event, and not the regular links that are anchor tags

binggle's avatar

Thanks for reply..

But I dont get your points.

Can you explain more in detail?

Actually I don't see the difference between livewire pagination and regular pagination.

The code looks same.

Can you?

binggle's avatar

If you mean using 'WithPagination' trait, I did.

use WithPagination; 

is declared in ParentComponent ..

Snapey's avatar

in the view, the buttons for next/previous and the pages emit wire:click events to move pages

binggle's avatar

thanks for reply.

I know what you mean .

So I tried with following codes.

// for previous page 
<a href="javascript:void();"
    wire:click="previousPage">
    <i class="fa fa-angle-left"></i>
</a>

// for next page 
<a href="javascript:void();"
    wire:click="nextPage">
    <i class="fa fa-angle-right"></i>
</a>

It did not work.

And I think it is not because of pagination view ..

Because the link view works propery without childcomponent's emit event. .

binggle's avatar
binggle
OP
Best Answer
Level 3

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.

Snapey's avatar

It can be big trouble.

only for the inexperienced.

binggle's avatar

I don't want to argue with someone.

But you didn't read my comments.

It works without child component.

Please or to participate in this conversation.