Директива wire:model

Директива wire:model используется для двусторонней привязки данных между полем ввода (input, textarea, select) и публичным свойством компонента Livewire. При изменении значения в поле ввода автоматически обновляется соответствующее свойство компонента, а при изменении свойства в компоненте - обновляется значение в поле. Директива поддерживает различные модификаторы для управления поведением привязки: live, blur, change, number, boolean, debounce и другие.

Синтаксис

<input type="text" wire:model="propertyName">

Пример

Создадим компонент с текстовым полем и выводом введенного значения:

<?php
	namespace App\Livewire;
	
	use Livewire\Component;
	
	class TextInput extends Component
	{
		public $text = '';
		
		public function render()
		{
			return view('livewire.text-input');
		}
	}
?>

<div>
	<input type="text" wire:model="text" placeholder="Enter text">
	<p>You entered: {{ $text }}</p>
</div>

Результат выполнения кода:

<input type="text" placeholder="Enter text">
<p>You entered: "abcde"</p>

Пример

Привяжем числовое значение с автоматическим преобразованием в целое число:

<?php
	namespace App\Livewire;
	
	use Livewire\Component;
	
	class Counter extends Component
	{
		public $num = 0;
		
		public function render()
		{
			return view('livewire.counter');
		}
	}
?>

<div>
	<input type="number" wire:model.number="num">
	<p>Number: {{ $num }}</p>
	<p>Type: {{ gettype($num) }}</p>
</div>

Результат выполнения кода:

<input type="number" value="10">
<p>Number: 10</p>
<p>Type: "integer"</p>

Пример

Используем модификатор live для немедленного обновления при вводе каждого символа:

<?php
	namespace App\Livewire;
	
	use Livewire\Component;
	
	class Search extends Component
	{
		public $query = '';
		public $res = [];
		
		public function updatedQuery()
		{
			$this->res = ['article', 'user', 'category'];
		}
		
		public function render()
		{
			return view('livewire.search');
		}
	}
?>

<div>
	<input type="text" wire:model.live="query" placeholder="Search...">
	<ul>
		@foreach ($res as $item)
			<li>{{ $item }}</li>
		@endforeach
	</ul>
</div>

Результат выполнения кода:

<input type="text" placeholder="Search...">
<ul>
	<li>article</li>
	<li>user</li>
	<li>category</li>
</ul>

Пример

Привяжем значение к переключателю (checkbox) как булево:

<?php
	namespace App\Livewire;
	
	use Livewire\Component;
	
	class Checkbox extends Component
	{
		public $isActive = false;
		
		public function render()
		{
			return view('livewire.checkbox');
		}
	}
?>

<div>
	<label>
		<input type="checkbox" wire:model.boolean="isActive">
		Is active
	</label>
	<p>Status: {{ $isActive ? 'Active' : 'Inactive' }}</p>
</div>

Результат выполнения кода:

<label>
	<input type="checkbox" checked>
	Is active
</label>
<p>Status: "Active"</p>

Пример

Используем модификатор debounce для задержки обновления на 500 мс:

<?php
	namespace App\Livewire;
	
	use Livewire\Component;
	
	class DebounceInput extends Component
	{
		public $text = '';
		public $res = '';
		
		public function updatedText()
		{
			$this->res = 'Input value: ' . $this->text;
		}
		
		public function render()
		{
			return view('livewire.debounce-input');
		}
	}
?>

<div>
	<input type="text" wire:model.debounce.500ms="text" placeholder="Type here...">
	<p>{{ $res }}</p>
</div>

Результат выполнения кода:

<input type="text" placeholder="Type here...">
<p>"Input value: abcde"</p>

Смотрите также

директиву wire:model.live,
которая обновляет свойство при каждом вводе символа
директиву wire:model.blur,
которая обновляет свойство при потере фокуса
директиву wire:click,
которая вызывает метод компонента при клике
метод render,
который возвращает шаблон компонента