If you've used front-end frameworks like Angular, React, or Vue, you are already familiar with this concept. However, if you are new to this concept, allow me to demonstrate.

            
1class MyNameIs extends Component
2{
3    public $name;
4}        

            
1<div>
2    <input type="text" wire:model="name">
3 
4    Hi! My name is {{ $name }}
5</div>        

When the user types something into the text field, the value of the $name property will automatically update. Livewire knows to keep track of the provided name because of the wire:model directive.

Internally, Livewire listens for "input" events on the element and updates the class property with the element's value. Therefore, you can apply wire:model to any element that emits input events.

Common elements to use wire:model on include:

Nested Data Binding

Livewire supports nested data binding using dot notation:

        
1<input type="text" wire:model="form.name">    

Debouncing Input

Livewire offers a "debounce" modifier when using wire:model. If you want to apply a 1 second debounce to an input, you include the modifier like so:

        
1<input type="text" wire:model.debounce.1000ms="name">
2 
3<!-- You can also specify the time in seconds: -->
4<input type="text" wire:model.debounce.1s="name">    

Lazily Updating

By default, Livewire sends a request to server after every "input" event. This is usually fine for things like <select> elements that don't update frequently, however, this is often unnecessary for text fields that update as the user types.

In those cases, use the lazy directive modifier to listen for the native "change" event.

            
1class MyNameIs extends Component
2{
3    public $name;
4}        

            
1<div>
2    <input type="text" wire:model.lazy="name">
3 
4    My name is chica-chica {{ $name }}
5</div>        

Now, the $name property will only be updated when the user clicks away from the input field.