search bar not working using laravel livewire - laravel

Question

here's the code for livewire whenever I run this code it shows nothing I am using laravel 7 and livewire for this approach.
For controller
<?php
namespace App\Http\Livewire;
use App\Models\brands;
use Livewire\Component;
class SearchBar extends Component
{
public $searchTerm;
public function render()
{
$searchTerm = '%'.$this->searchTerm.'%';
return view('livewire.search-bar', [
'users' => brands::where('Name', 'like', $searchTerm)->get()
]);
}
}
For view
<div>
<input type="text" placeholder="Search users..." wire:model='searchTerm'/>
<ul>
#foreach($users as $user)
<li>{{ $user->Website }}</li>
#endforeach
</ul>
</div>

Answer 1

I think it should actually work. but if not, this is how i would write it.
You do not need to pass the variables via the view() function.
<?php
namespace App\Http\Livewire;
use App\Models\brands;
use Livewire\Component;
class SearchBar extends Component
{
public $searchTerm;
public $users
public function render()
{
$searchTerm = '%'.$this->searchTerm.'%';
$this->users = brands::where('Name', 'like', $searchTerm)->get();
return view('livewire.search-bar');
}
}
I hope this works, otherwise maybe something is wrong with the livewire installation?

Answer 2

I think your issue is that you're searching your Brands model for a "Name" where database columns are typically lowercase, so you would need to use "name" instead. Unless you named the column with an uppercase, you would need to use lowercase. Here is also how I would format the Livewire Component.
<?php
namespace App\Http\Livewire;
use App\Models\Brands;
use Livewire\Component;
class SearchBar extends Component
{
public $searchTerm;
public function render() {
return view('livewire.search-bar', [
'users' => $this->users,
]);
}
public function getUsersProperty() {
$query = Brands::query()
->when($this->searchTerm, fn($query) => $query->where('name', 'like', '%'.$this->searchTerm.'%'))
->get()
return $query;
}
}
I would isolate the function to actually retrieve the Brands to another function, so it doesn't clutter your render method. Notice that I didn't declare a public $users variable. When you don't declare a variable in a component, Livewire will search for a getVariableNameProperty() function and call that. So on each render, you are calling that function without having to explicitly call it, and returning the query results to the view.
Also just a note, models are typically singular unless you explicitly create them as plural, so your Brands model could be Brand. If your model does happen to be Brand, you just need to change the Brands parts in the above code to Brand. As well, you are using a lowercase first letter on your model--that needs to be uppercase.