I'm using livewire 3 to make simple search form
The form :
namespace App\Livewire\Forms;
use Livewire\Attributes\Rule;
use Livewire\Form;
class OutputForm extends Form
{
public $search = '';
public $employees = '';
public function updatedSearch()
{
$this->employees = \App\Models\Employee::search($this->search)->get();
}
}
blade :
<div class="col-lg-6 mx-4">
<div class="form-floating mb-3">
<input class="form-control" id="search" type="text" wire:model.live.debounce.500ms="form.search"/>
<label for="search">Find employee</label>
</div>
@if (!is_null($form->employees) || !empty($form->employees))
@foreach ($form->employees as $employe)
<li>{{ $employee->name }}</li>
@endforeach
@endif
</div>
It will work if i use regular livewire's component But Is it possible to fire the updated() hook inside form ? I already tried it, but it seems that the updated() hook isn't firing, how to solve this ?
By the looks of things, the Form component does not handle any lifecycle hooks. There's 2 things you can do:
updated
lifecycle method on your main component (see docs)class YourComponent extends Component
{
public OutputForm $form;
public function updated($field, $value)
{
if ($field == 'form.search') {
$this->form->updatedSearch();
}
}
// OR
public function updatedFormSearch($value, $field)
{
$this->form->updatedSearch();
// $field here is 'search', not 'form.search'!
}
}
updatedOutputForm
(see docs). It isn't documented but just like any updated
method it returns the $field
and $value
trait OutputForm
{
public $search = '';
//
public function updatedOutputForm($field, $value)
{
if ($field === 'search') {
$this->updatedSearch();
}
}
// OR
public function updatedSearch($value)
{
// This does trigger, whether it's in this trait or in the main component
}
}
class YourComponent extends Component
{
use OutputForm;
}