Question 243604 in Laravel Question posted in
The official Laravel Documentation can be found here.

Laravel – Livewire component is not updated with the wire:model value

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

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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


  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search