Директива wire:model
Директива wire:model обеспечивает двустороннюю привязку данных между полем ввода и свойством компонента Livewire. При вводе текста или изменении значения поля автоматически обновляется соответствующее свойство компонента, а при изменении свойства из PHP обновляется значение поля. В значение директивы передаётся имя публичного свойства компонента.
Синтаксис
<input type="text" wire:model="propertyName">
Пример
Давайте создадим поле ввода, привязанное к свойству $text компонента:
<?php
namespace AppLivewire;
use LivewireComponent;
class FormComponent extends Component
{
public $text = '';
public function render()
{
return view('livewire.form-component');
}
}
?>
<div>
<input type="text" wire:model="text">
<p>Введенный текст: {{ $text }}</p>
</div>
Результат выполнения кода после ввода текста:
<input type="text" value="abcde">
<p>Введенный текст: abcde</p>
Пример
Рассмотрим пример с числовым свойством $num:
<?php
namespace AppLivewire;
use LivewireComponent;
class CounterComponent extends Component
{
public $num = 0;
public function render()
{
return view('livewire.counter-component');
}
}
?>
<div>
<input type="number" wire:model="num">
<p>Значение: {{ $num }}</p>
<button wire:click="inc">+1</button>
</div>
<?php
namespace AppLivewire;
use LivewireComponent;
class CounterComponent extends Component
{
public $num = 0;
public function inc()
{
$this->num++;
}
public function render()
{
return view('livewire.counter-component');
}
}
?>
Результат выполнения кода после нажатия на кнопку:
<input type="number" value="5">
<p>Значение: 5</p>
<button>+1</button>
Пример
Привяжем свойство $arr к полю ввода с использованием модификатора .defer, который откладывает отправку запроса до момента потери фокуса:
<?php
namespace AppLivewire;
use LivewireComponent;
class ArrayComponent extends Component
{
public $arr = ['a', 'b', 'c', 'd', 'e'];
public function render()
{
return view('livewire.array-component');
}
}
?>
<div>
<input type="text" wire:model.defer="arr.0">
<p>Первый элемент: {{ $arr[0] }}</p>
</div>
Результат выполнения кода после изменения поля и потери фокуса:
<input type="text" value="article">
<p>Первый элемент: article</p>
