What seems to be the problem: Trying to use a where clause in the render function and expecting it to update when the user types in the search input field, but always getting all the rows from my table. It is never actually returning my search results. I believe I am following exactly as this is outlined in the Livewire documentation.
Are you using the latest version of Livewire: Yes
Do you have any screenshots or code examples:
View calling Livewire component:
<x-app-layout>
<x-slot name="header">
<h2 class="font-semibold text-xl text-gray-800 leading-tight">
Leads
</h2>
</x-slot>
<div class="py-12">
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
<div class="bg-white overflow-hidden shadow-xl sm:rounded-lg">
<div class="bg-white border-b border-gray-200">
@livewire('leads.lead-index')
</div>
</div>
</div>
</div>
PHP Code:
<?php
namespace App\Http\Livewire\Leads;
use App\Models\Lead;
use Livewire\Component;
use Livewire\WithPagination;
class LeadIndex extends Component
{
use WithPagination;
public $search;
protected $queryString = ['search'];
public function mount() {
}
public function updatedSearch() {
$this->resetPage();
}
public function render()
{
return view('leads.lead-index', [
'leads' => Lead::where('first_name', 'like', '%' . $this->search . '%')->get(),
]);
}
}
Livewire Component View:
<div class="flex items-center justify-between px-4 py-4">
<div class="flex items-center space-x-2">
<input type="text" class="rounded-md border border-gray-200 bg-gray-100 placeholder-gray-600 w-72 px-3 py-2 text-sm text-black leading-tight focus:outline-none focus:border-gray-500" id="search" placeholder="Search..." wire:model="search" />
<div class="relative">
<select class="block appearance-none w-full bg-gray-100 border border-gray-200 text-gray-600 text-sm py-2 px-3 pr-8 rounded leading-tight focus:outline-none focus:bg-white focus:border-gray-500" id="domain">
<option>Select a Landing Page...</option>
</select>
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
<svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/></svg>
</div>
</div>
</div>
<div class="flex items-end space-x-2">
<button class="border border-gray-400 rounded px-3 pt-1 pb-2 hover:bg-gray-200 flex items-center space-x-1 text-sm">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path></svg>
<div class="pt-1">Export</div>
</button>
</div>
</div>
<div class="border-t border-b border-gray-400 text-gray-700 divide-y divide-gray-400">
<div class="flex justify-between px-4 py-2 font-semibold bg-blue-200 text-black">
<div class="w-2/12">Full Name</div>
<div class="w-3/12">Email</div>
<div class="w-2/12">Mobile Phone</div>
<div class="w-2/12">Organization</div>
<div class="w-2/12 text-center">reCAPTCHA Score</div>
<div class="w-1/12"></div>
</div>
@foreach($leads as $lead)
<div class="flex justify-between px-4 py-2 text-black text-sm">
<div class="w-2/12">{{ $lead->full_name }}</div>
<div class="w-3/12">{{ $lead->email }}</div>
<div class="w-2/12">{{ $lead->phone }}</div>
<div class="w-2/12">{{ $lead->organization }}</div>
<div class="w-2/12 text-center">{{ $lead->recaptcha_score }}</div>
<div class="w-1/12"></div>
</div>
@endforeach
</div>
<div class="px-4 py-2 bg-blue-50">
{{-- $leads->links() --}}
</div>