Livewire component is not updated with the wire:model value

Question

I have a simple component : 

class SearchTypeClient extends Component
{

    public $search;
    public function render()
    {

        Log::info('search = ' . $this->search );

        $tabTypeClient = TypeClient::where('label', 'like', '%' . $this->search . '%')->get();

        return view('livewire.search-type-client' , [
            'tabTypeClient' => $tabTypeClient,
        ]);

    }
}

Here is the view :

<div>
    Recherche : <input wire:model="search" type="search" />
    {{ $search }}
</div>

My component is included with @livewire('searchTypeClient') and is correctly displayed.

But when I type something in the input text, the value of the $search variable is never updated. In the log, I can see $search is always empty.

I have no JS errors in the Chrome console. I have seen on other posts that this issue can occur when there is no one root element in the view. But as you can see, I have my

Livewire style and javascript are correctly included (I can see them in the source).

@livewireStyles
</head>

@livewireScripts
</body>

Any clue ?

Thanks

Answer 1

OK I found it. I had to write wire:model.live instead of wire:model

<input wire:model.live="search" type="search" />

I guess I read an outdated documentation

Answer 2

So based on your existing answer, it's clear that you're using Livewire 3, but was reading the v2 docs.

One of the breaking changes between v2 and v3, is that wire:model is no longer "live" by default - instead the new default is deferred. This means that the client-side of Livewire gets updated on every change, but the server-side gets queued until an action is made.

To prove this, you can make two key changes to your view - show the client-side state, as well as a button to refresh the component, thereby triggering an action.

<div x-data>
    Recherche (deferred): <input wire:model="search" type="search" />
    Recherche (live): <input wire:model.live="search" type="search" />

    Server-side value: {{ $search }}
    Client-side value: <span x-text="$wire.search"></span>

    <button type="button" wire:click="$refresh">Refresh</button>
</div>

Answer 3

wire:model.live instead of wire:model

https://livewire.laravel.com/docs/wire-model#updating-on-change-event

I found this answer on another board and thought I would share it for others to see. I did not test to see if this solution would work with the prior version. As such, unless you take the time to test it with the prior version, do not use it in the prior version...