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

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

Синтаксис

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

Пример

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

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

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

После ввода текста и потери фокуса:

<input type="text" value="Hello">
<p>You typed: Hello</p>

Пример

Давайте передадим значение поля напрямую в метод:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class Search extends Component
	{
		public $query = '';
		public $res = '';
		
		public function search($query)
		{
			$this->res = 'Searching for: ' . $query;
		}
		
		public function render()
		{
			return view('livewire.search');
		}
	}
?>

<input type="text" wire:change="search($event.target.value)">
<p>{{ $res }}</p>

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

<input type="text" value="laravel">
<p>Searching for: laravel</p>

Пример

Давайте при изменении значения select будем обновлять связанное свойство:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class Selector extends Component
	{
		public $color = 'red';
		public $message = '';
		
		public function updateColor()
		{
			$this->message = 'Selected color: ' . $this->color;
		}
		
		public function render()
		{
			return view('livewire.selector');
		}
	}
?>

<select wire:model="color" wire:change="updateColor">
	<option value="red">Red</option>
	<option value="green">Green</option>
	<option value="blue">Blue</option>
</select>
<p>{{ $message }}</p>

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

<select>
	<option value="red" selected>Red</option>
	<option value="green">Green</option>
	<option value="blue">Blue</option>
</select>
<p>Selected color: red</p>

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

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