Livewire component not updating

Question

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?

Timur Rodya · Accepted Answer · 2023-02-09 00:13:59Z

4

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

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

answered Feb 9, 2023 at 0:13

Timur Rodya

1191 gold badge1 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

JanBoehmer Over a year ago

Shame on me. A core thing of Livewire.... Damn, thank you!

dummy.learn · Accepted Answer · 2023-02-08 23:03:31Z

2

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.

answered Feb 8, 2023 at 23:03

dummy.learn

463 bronze badges

2 Comments

JanBoehmer Over a year ago

Not related to my issue resolution but very good comment. Thank you! I'll update it

dummy.learn Over a year ago

Aha, did not even know that your component was not inside single div .... i thought this was the problem origin ... Have fun with livewire

Collectives™ on Stack Overflow

Livewire component not updating

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related