skip to Main Content

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?

2

Answers


  1. 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.

    Login or Signup to reply.
  2. Wrap your component. Make sure your Blade view only has ONE root element.

    <div>
       <input type="text" wire:model="search">
       {{ $search }}
    </div>
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search