Level 122
any time you have a loop, you MUST use wire:key so that livewire knows which rows have been removed
Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.
I'm creating a searchable select component, where when typing and clicking on search it brings up the students in the tray, when clicking it should leave the student's name as the input value, but that doesn't happen, I tried to check the variables with dumps and dds, the value is assigned to the variables but it is not rendered in the view.
Livewire:
public $search = '';
public $students = [];
public $studentSelected = '';
public $showResults = false;
public $loading = false;
public function getStudents()
{
if (strlen($this->search) >= 2) {
$this->students = Student::whereHas('profile', function($query) {
$query->whereHas('user', function ($query) {
$query->where('name', 'like','%'.$this->search.'%');
});
})->take(300)->get();
$this->showResults = true;
} else {
$this->students = [];
$this->showResults = false;
}
}
public function updatedSearch()
{
$this->studentName = $this->search;
}
public function selectedStudent($id)
{
$student = Student::find($id);
if ($student && $student->profile && $student->profile->user) {
$this->search = $student->profile->user->name;
}
$this->studentSelected = $id;
$this->students = [];
$this->showResults = false;
}
public function render()
{
return view('livewire.student-relation');
}
Blade:
<form wire:submit="getStudents()">
<div class="flex">
<div class="w-1/2">
<input
type="text"
wire:model="search"
class="w-full border border-gray-300 rounded-md shadow-sm focus:ring focus:ring-green-500 focus:border-green-500"
placeholder="Pesquisar aluno"
>
</div>
<div>
<button
type="submit"
class="ml-2 px-4 py-2 bg-green-500 text-white rounded-md shadow-sm hover:bg-green-600 focus:outline-none focus:ring focus:ring-green-500 flex items-center">
Pesquisar
</button>
</div>
</div>
</form>
@if($showResults && count($students) > 0)
<div class="bg-white border border-gray-300 rounded-md shadow-sm mt-2 w-1/2">
<ul class="overflow-y-auto max-h-[12rem]">
@forelse($students as $student)
<li class="p-2 hover:bg-gray-100 cursor-pointer"
wire:click="selectedStudent({{$student->id}})">
{{ $student->profile->user->name }}
</li>
@empty
<li class="p-2 text-gray-500">Nenhum aluno encontrado</li>
@endforelse
</ul>
</div>
@endif
Please or to participate in this conversation.