Search code examples
phplaravellaravel-livewire

livewire updated hook not firing inside livewire's form


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 ?


Solution

  • By the looks of things, the Form component does not handle any lifecycle hooks. There's 2 things you can do:

    • You can hook the 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'!
        }
    }
    
    • You can use the Form component as trait and hook into it with 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;
    }