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

	Директива wire:model.live является модификатором базовой директивы wire:model
	и обеспечивает моментальную двустороннюю привязку данных между полем ввода
	и свойством компонента Livewire. В отличие от стандартной wire:model,
	которая обновляет значение только при отправке формы или потере фокуса,
	директива wire:model.live отправляет запрос на сервер и обновляет
	свойство компонента при каждом вводе символа, а затем перерисовывает шаблон
	с новым значением.


Синтаксис

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


	В значение директивы передаётся имя публичного свойства компонента,
	с которым осуществляется привязка. Директива работает с полями ввода
	типов text, email, password, number,
	а также с элементами select и textarea.


Пример 

	Давайте создадим компонент с текстовым полем, значение которого
	мгновенно отображается в заголовке:


	<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class Message extends Component
	{
		public $text = '';
		
		public function render()
		{
			return view('livewire.message');
		}
	}
?>


	<div>
	<input type="text" wire:model.live="text" placeholder="Enter text...">
	<h2>{{ $text }}</h2>
</div>


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


	<input type="text" placeholder="Enter text..." value="Hello">
<h2>Hello</h2>


Пример 

	Давайте используем wire:model.live с числовым полем
	и покажем квадрат введённого числа:


	<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class NumberSquare extends Component
	{
		public $num = 0;
		
		public function render()
		{
			return view('livewire.number-square');
		}
	}
?>


	<div>
	<input type="number" wire:model.live="num">
	<p>Square: {{ $num * $num }}</p>
</div>


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


	<input type="number" value="5">
<p>Square: 25</p>


Пример 

	Давайте выполним фильтрацию списка элементов при вводе текста
	с помощью wire:model.live:


	<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class Search extends Component
	{
		public $query = '';
		public $items = ['apple', 'banana', 'cherry', 'date', 'elderberry'];
		
		public function render()
		{
			$filtered = array_filter($this->items, function($item) {
				return stripos($item, $this->query) !== false;
			});
			
			return view('livewire.search', ['filtered' => $filtered]);
		}
	}
?>


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


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


	<input type="text" placeholder="Search..." value="ap">
<ul>
	<li>apple</li>
</ul>


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

	

		

			директиву wire:model, 

			которая привязывает поле ввода к свойству компонента с обновлением по событию input
		
		

			директиву wire:model.blur, 

			которая обновляет значение при потере фокуса
		
		

			директиву wire:model.change, 

			которая обновляет значение при изменении поля ввода
		
		

			директиву wire:model.debounce, 

			которая задерживает обновление для уменьшения количества запросов