Livewire Update listing based on selected option

bind the dropdown select element to a public property of the livewire component.

Use the public property in your database query.

plus;

Reset to page #1 whenever you change the category.

I hate to sound so dumb but this is what I was doing but it's not working.

class Classes extends Component
{
	use With Pagination;

	public $searchCategory;

	public function updating()
	{
		dd($this->searchCategory);
	}

	public function render()
	{
		$categories = Categories::all();
		$classes = Class::with('categories')->paginate(20);
		return view('livewire.classes', compact('classes', 'categories'));
	}
}

When i run this, I get the following:

Unable to call component method. Public method [searchCategory] not found on component: [classes]

Forgot to mention this is what my select looks like on my page.

<select id="classesCategories" wire:click="searchCategory"
                    class="form-select block w-full pl-3 pr-10 py-2 text-base leading-6 border-gray-300 focus:outline-none focus:shadow-outline-blue focus:border-blue-300 sm:text-sm sm:leading-5">
                    @foreach($categories as $category)
                    <option value="{{ $category->id }}">{{ $category->name }}</option>
                    @endforeach
                </select>

@snapey So I was able to get my select saving to a public variable so that I could interact with it. Now my issue is how do I filter the data to only show those.

So I have everything working now but pagination since I had to cast my data to an array. Anyway to still create pagination?

I had to cast my data to an array

why?

Show your latest code?

When I do setup everything like what's below, I get pagination but I can't get my select to work.

Http/Livewire/classes.php

<?php

namespace App\Http\Livewire;

use App\Models\Class;
use App\Models\Categories;
use Livewire\Component;
use Livewire\WithPagination;

class Classess extends Component
{
    use WithPagination;

    public $selectedCategory;

    public function updating($value)
    {
        $this->selectedCategory = $value;
    }

    public function mount($selectedCategory = 0)
    {
        $this->selectedCategory = $selectedCategory;
    }


    public function render()
    {

        $categories = Categories::all();
        $classes = Class::with('categories')->paginate(20);
        $selectedCategory = $this->selectedCategory;
        return view(
            'livewire.classes',
            compact('categories', 'classess', 'selectedCategory')
        );
    }

    public function paginationView()
    {
        return 'livewire/pagination';
    }
}

I've even tried making the data a public variable but to do that I then had to cast my collection to an array which displayed all fo the data fine and the category select worked. However pagination did not.

What is this>

    public function paginationView()
    {
        return 'livewire/pagination';
    }

Your classes should be a paginated collection so you can do {{ $classes->links() }} in the view

@snapey That is Livewire's pagination. If I leave the collection as is, I can paginate just fine. When I turn the collection into an array so that I can store it in a public variable in Livewire, since it doesn't support collections, I loose the pagination.

You don't need to do that. Store the model in a public property. It will be passed to the view fine, and re-hydrated in the component next time it is rendered.

In your code, I don't see you converting the Eloquent collection?

if I understand correctly you would like to filer there classes by category

$classes = Class::with('categories')
				->where('category_id', $this->selectedCategory)
				->paginate(20);