Livewire Simple Filter Issues - laravel

Question

I am using first time laravel livewire in my project. I am trying to create one simple filter option and this filter will trigger from a dropdown. My problem is when a dropdown value change its completely hide my component view.
I am not sure where i am making a mistake in this but i want to know the best way to resolve this.
my code is this Livewire component
<?php
namespace App\Http\Livewire\Frontend\Boat;
use App\Models\Product;
use Livewire\Component;
class Listing extends Component
{
public $filter_option;
// public $message;
public $product;
public function mount()
{
$this->product = Product::where([
'type_id' => 1,
'status' => 1,
])->orderBy('name', 'asc')->get();
}
public function filter_speed()
{
$this->product = Product::where([
'type_id' => 1,
'status' => 1,
])->orderBy('name', 'asc')->get();
}
public function render()
{
return view('livewire.frontend.boat.listing');
}
}
My blade is
<select wire:model="filter_option" class="form-control" wire:change='filter'>
<option value="#">Filter</option>
<option value="speed">Speed</option>
</select>
//or
<button wire:click='filter_speed'>Filter by speed</button> <!-- Simple button click -->

Answer 1

In my opinion in your case its not necessary to use Query on mount().
But If in case of Filter u can use this method:
<?php
// Livewire
namespace App\Http\Livewire\Frontend\Boat;
use App\Models\Product;
use App\View\Components\comment;
use Livewire\Component;
class Listing extends Component
{
public $filter_option;
// public $message;
// public $product;
public $orderBy = 'id';
public $orderType = 'desc';
public function filter_speed()
{
$this->orderBy = 'speed';
// $this->emit('filter_speed');
}
public function render()
{
$product = Product::where([
'type_id' => 1,
'status' => 1,
])
->orderBy($this->orderBy, $this->orderType)
->get();
return view('livewire.frontend.boat.listing', compact('product'));
}
}
<button wire:click.prevent='filter_speed'>Filter by speed</button>
Instant of making many Query make one with custom variable