wire:model – live edit
resources\views\livewire\greeter.blade.php
<div>
<h1>{{ $name }}</h1>
<input type="text" wire:model="name" />
</div>
app\Http\Livewire\Greeter.php
<?php
namespace App\Http\Livewire;
use Livewire\Component;
class Greeter extends Component
{
public $name = 'Jeremy';
public function render()
{
return view('livewire.greeter');
}
}
wire:model.blur
<div>
<h1>{{ $name }}</h1>
<input type="text" wire:model.blur="name" />
</div>
wire:model.change
<div>
<h1>{{ $name }}</h1>
<input type="text" wire:model.change="name" />
</div>
wire:model.live – live edit without delay
resources\views\livewire\greeter.blade.php
<div>
<h1>{{ $greeting }}! {{ $name }}</h1>
<select wire:model.live="greeting">
<option value="" disabled>chose</option>
<option value="hello">Hello</option>
<option value="hi">Hi</option>
<option value="hey">Hey</option>
<option value="howdy">Howdy</option>
</select>
<input type="text" wire:model.live="name" placeholder="" />
</div>
app\Http\Livewire\Greeter.php
<?php
namespace App\Http\Livewire;
use Livewire\Component;
class Greeter extends Component
{
public $name = 'Jeremy';
public $greeting = 'hello';
public function render()
{
return view('livewire.greeter');
}
}
wire:model.live.debounce – edit with delay
<div>
<h1>{{ $name }}</h1>
<input type="text" wire:model.live.debounce="name" />
</div>
wire:model.live.debounce.1000ms – edit with delay 1000ms