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

Kikismedia's avatar

filter isnt reseting , search isnt updating

please kindly help what m i doing wrong , filter isnt reseting , search isnt updating also pagination isnt work

<?php

namespace App\Http\Livewire;


use App\Models\School;
use App\Models\Status;
use App\Models\Post;
use App\Models\Vote;
use Livewire\Component;
use Livewire\WithPagination;

class PostsIndex extends Component
{
   use WithPagination;

    public $status;
    public $school;
    public $filter;
    public $search;

    protected $queryString = [
        'status',
        'school',
        'filter',
        'search',
    ];

    protected $listeners = ['queryStringUpdatedStatus'];

    public function mount()
    {
        $this->status = request()->status ?? 'All';
    }

    public function updatingSchool()
    {
        $this->resetPage();
    }

    public function updatingFilter()
    {
        $this->resetPage();
    }

    public function updatingSearch()
    {
        $this->resetPage();

    }

    public function updatedFilter()
    {
        if ($this->filter === 'My Exp') {
            if (! auth()->check()) {
                return redirect()->route('login');
            }
        }
    }


    public function queryStringUpdatedStatus($newStatus)
    {
        $this->resetPage();
        $this->status = $newStatus;
    }

    public function render()
    {
        $statuses = Status::all()->pluck('id', 'name');
        $schools = School::all();

        return view('livewire.posts-index', [
            'posts' => Post::with('user', 'school', 'status')
            ->when($this->status && $this->status !== 'All', function ($query) use ($statuses) {
                return $query->where('status_id', $statuses->get($this->status));
            })->when($this->school && $this->school !== 'All Schools', function ($query) use ($schools) {
                return $query->where('school_id', $schools->pluck('id', 'name')->get($this->school));
            })->when($this->filter && $this->filter === 'Top Exp', function ($query) {
                return $query->orderByDesc('votes_count');
            })->when($this->filter && $this->filter === 'My Exp', function ($query) {
                return $query->where('user_id', auth()->id());
            })->when($this->filter && $this->filter === 'Spam Posts', function ($query) {
                return $query->where('spam_reports', '>', 0)->orderByDesc('spam_reports');

            })->when(strlen($this->search) >= 3, function ($query) {
                return $query->where('body', 'like', '%'.$this->search.'%');
            })
                ->addSelect(['voted_by_user' => Vote::select('id')
                    ->where('user_id', auth()->id())
                    ->whereColumn('post_id', 'posts.id')
                ])
                ->withCount('votes')
                ->withCount('comments')
                ->orderBy('id', 'desc')
                ->simplePaginate(10)
                ->withQueryString(),
                'schools' => $schools,
        ]);
    }
}
0 likes
8 replies
aleahy's avatar

How have you set up your blade view? Have you linked your variables with wire:model?

Kikismedia's avatar

yes the issue I'm having is that when I filter schools it won't update untill I refresh the page manual , Sam's goes to search I would have to click the button before the search update instead of real time update

valentin_vranic's avatar

But have you tried with wire:model.live, that will force to update the property immediately and to make a roundtrip from fron- to backend.

aleahy's avatar

If you could show us the blade file, it might give us a better idea of what is wrong. I can't really see anything wrong in the component side.

aleahy's avatar

I think the issue is that you're using a nested component.

This is from the livewire docs:

"Nested components CAN accept data parameters from their parents, HOWEVER they are not reactive like props from a Vue component."

https://laravel-livewire.com/docs/2.x/nesting-components

Can you do what you want to do in the single livewire component (PostsIndex), or just extract the PostIndex component to a blade component instead of a livewire one?

Or at least try to just display something like $post->title or $posts->votes_count instead of the PostIndex livewire component just to see if you get the reactivity you're after. Then you will know if this is the issue or not.

pilat's avatar

@aleahy I have a parent page without paginator and a nested component with one. So, there's only one paginator, which is child's. Still, when I call "resetPage()" inside the child, is doesn't have any effect…

UPDATE: after some dumping, it turns out that updatedPropName() hook is completely ignored… Probably due to the #[Reactive] attribute on that $propName :/

pilat's avatar

Solution: listen for the prop update on the Parent, then emit an event like 'propNameChanged'.

In the Child component, you listen to this event and call the resetPage().

class Parent extends Component
{
    public string $propName = '';

    public function updatedPropName()
    {
        $this->emit('propNameChanged');
    }
}

class Child extends Component
{
    use WithPagination;

    #[Reactive]
    public string $propName;

    protected $listeners = ['propNameChanged' => 'pageReset'];

    public function pageReset()
    {
        $this->resetPage();
    }
}

Please or to participate in this conversation.