Livewire — Interactive Pages in PHP
Lendly's book list should filter as a member types, with no page reload. Normally that means writing JavaScript. Livewire lets you build it in PHP and Blade instead: the browser sends each change to the server, and the server sends back the updated HTML.
The rule
Public properties hold the state; wire: attributes call the server.
A class-based Livewire component is two files. A PHP class holds the state and the actions:
namespace App\Livewire;
use App\Models\Book;
use Livewire\Component;
class BookSearch extends Component
{
public string $query = '';
public function clear()
{
$this->query = '';
}
public function render()
{
return view('livewire.book-search', [
'books' => Book::where('title', 'like', "%{$this->query}%")->get(),
]);
}
}A Blade view draws it and wires the browser to the class:
<div>
<input wire:model.live="query" placeholder="Search books">
<button wire:click="clear">Clear</button>
@foreach ($books as $book)
<p>{{ $book->title }}</p>
@endforeach
</div>publicproperties are the component's state, and the view can read them.wire:modelbinds an input to a property. Plainwire:modelsyncs when the next action runs..livesyncs as you type.wire:clickcalls a public method on the class.
You drop the component into any page with <livewire:book-search />.
Each interaction is one round trip. The browser sends the component's current state and the action, the server runs it and calls render() again, and Livewire updates only the parts of the page that changed.
The shortcut
Trace any Livewire interaction as input → property → render → patch. Find which property or method the wire: attribute names, and you know exactly which PHP runs.
Input
The member types, and
wire:model.live="query"sends the new text.
The trap is expecting a private property to reach the view or keep its value between requests. Only public properties are shared with the view and carried from one round trip to the next.
Drills
Answer fast — trust the rule.
Where does the search text live in the BookSearch component?
What does wire:click="clear" do?
How does wire:model.live differ from plain wire:model?
After the server re-renders a component, what does Livewire do?
Remember
- Public properties hold the state;
wire:attributes call the server. - Trace it: input → property → render → patch.
- Trap: only
publicproperties reach the view and survive between requests.