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

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

Синтаксис

<input type="text" wire:model.change="methodName">

Пример

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

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class UserInput extends Component
	{
		public $text = '';
		public $message = '';
		
		public function updateMessage()
		{
			$this->message = 'Text changed to: ' . $this->text;
		}
		
		public function render()
		{
			return view('livewire.user-input');
		}
	}
?>

<div>
	<input type="text" wire:model.change="updateMessage" placeholder="Enter text">
	<p>{{ $message }}</p>
</div>

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

<div>
	<input type="text" placeholder="Enter text">
	<p>Text changed to: abcde</p>
</div>

Пример

Давайте используем wire:model.change для фильтрации списка при изменении значения в поле поиска:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class SearchList extends Component
	{
		public $search = '';
		public $items = ['a', 'b', 'c', 'd', 'e'];
		
		public function filterItems()
		{
			// Filter logic will be applied in render
		}
		
		public function render()
		{
			$filtered = array_filter($this->items, function($item) {
				return stripos($item, $this->search) !== false;
			});
			
			return view('livewire.search-list', [
				'filtered' => $filtered
			]);
		}
	}
?>

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

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

<div>
	<input type="text" placeholder="Search...">
	<ul>
		<li>c</li>
	</ul>
</div>

Пример

Давайте объединим wire:model.change с другими модификаторами, например с number для числового ввода:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class PriceCalculator extends Component
	{
		public $price = 0;
		public $result = '';
		
		public function calculateTotal()
		{
			$total = $this->price * 1.2; // Add 20% tax
			$this->result = 'Total with tax: ' . number_format($total, 2);
		}
		
		public function render()
		{
			return view('livewire.price-calculator');
		}
	}
?>

<div>
	<input type="number" wire:model.change.number="calculateTotal" step="0.01">
	<p>{{ $result }}</p>
</div>

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

<div>
	<input type="number" step="0.01">
	<p>Total with tax: 120.00</p>
</div>

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

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