CODEWITHSUNDEEP
laravellaravel-bladelaravel-livewire
JanBoehmer
JanBoehmer

Reputation: 555

Livewire component not updating

I have a simple component:

<input type="text" wire:model="search">
{{ $search }}

I load this like this:

@livewire('searchbar')

And this is my class:

class Searchbar extends Component
{
    public $search;

    public $results = [];

    public function updatedSearch()
    {
        info($this->search);
        $this->results = Client::search($this->search)->get();
    }

    public function render()
    {
        return view('livewire.searchbar', [
            'results' => $this->results,
        ]);
    }
}

When I type into the input field, the info() logs the correct value but in the view, the the {{ $search }} gets not updated. When I use protected $queryString = ['search']; the URL get's updated correctly as well and if I would use dd() instead of info() I'd see the view updating with the dd.

Why is the $search not updating in the view?

Upvotes: 1

Views: 2739

Answers (2)

Timur Rodya
Timur Rodya

Reputation: 119

Wrap your component. Make sure your Blade view only has ONE root element.

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

Upvotes: 4

dummy.learn
dummy.learn

Reputation: 46

First thing first, inside livewire render, you do not need to send variables.

This will be sufficient.

public function render()
    {
        return view('livewire.searchbar');
    }

You already declared $results as public variable, just like $search.
Livewire will know when the content of those variables are updated.

And now please try again.

$search should be automatically updated based on any text you inserted in input text with wire:model attribute.

Upvotes: 2

Related Questions