Метод updating

Метод updating класса Component в Livewire автоматически вызывается перед тем, как свойство компонента будет изменено. Он получает два параметра: новое значение свойства и имя свойства. Метод позволяет выполнить валидацию, преобразование или отмену изменения свойства до его фактического обновления.

Синтаксис

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class UserProfile extends Component
	{
		public $name;
		
		public function updating($property, $value)
		{
			// логика перед обновлением свойства
		}
		
		public function render()
		{
			return view('livewire.user-profile');
		}
	}
?>

Метод также можно использовать с постфиксом для конкретного свойства, тогда он будет вызываться только при изменении этого свойства.

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class UserProfile extends Component
	{
		public $name;
		
		public function updatingName($value)
		{
			// логика только для свойства name
		}
		
		public function render()
		{
			return view('livewire.user-profile');
		}
	}
?>

Если в методе вернуть false, изменение свойства будет отменено, а шаблон компонента не будет перерендерен.

Пример

Давайте создадим компонент с полем ввода и свойством $text. В методе updating сделаем так, чтобы текст преобразовывался в верхний регистр перед сохранением:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class TextTransformer extends Component
	{
		public $text = '';
		
		public function updating($property, $value)
		{
			if ($property === 'text') {
				return strtoupper($value);
			}
		}
		
		public function render()
		{
			return view('livewire.text-transformer');
		}
	}
?>

<div>
	<input type="text" wire:model.live="text">
	<p>Text: {{ $text }}</p>
</div>

При вводе текста в поле ввода, он автоматически преобразуется в заглавные буквы.

Пример

Давайте реализуем валидацию с помощью метода updating. Если вводимое значение не проходит проверку, изменение отменяется и выводится сообщение об ошибке:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class UserAge extends Component
	{
		public $age = 18;
		public $error = '';
		
		public function updatingAge($value)
		{
			if ($value < 18 || $value > 100) {
				$this->error = 'Age must be between 18 and 100';
				return false;
			}
			
			$this->error = '';
		}
		
		public function render()
		{
			return view('livewire.user-age');
		}
	}
?>

<div>
	<input type="number" wire:model.live="age">
	@if($error)
		<p style="color: red;">{{ $error }}</p>
	@endif
	<p>Age: {{ $age }}</p>
</div>

Если пользователь введет недопустимое значение, свойство $age не изменится, и будет показано сообщение об ошибке.

Пример

Рассмотрим пример с несколькими свойствами и общим методом updating, где мы логируем все изменения:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class UserProfile extends Component
	{
		public $name = '';
		public $email = '';
		public $logs = [];
		
		public function updating($property, $value)
		{
			$this->logs[] = "Changing {$property} to {$value}";
			
			if ($property === 'email') {
				return strtolower(trim($value));
			}
		}
		
		public function render()
		{
			return view('livewire.user-profile');
		}
	}
?>

<div>
	<input type="text" wire:model.live="name" placeholder="Name">
	<input type="text" wire:model.live="email" placeholder="Email">
	<h3>Logs:</h3>
	@foreach($logs as $log)
		<p>{{ $log }}</p>
	@endforeach
</div>

При каждом изменении свойств в лог записывается сообщение, а для свойства $email дополнительно применяется преобразование.

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

метод updated,
который вызывается после обновления свойства
метод updatingFoo,
который предназначен для конкретного свойства
метод updatedFoo,
который вызывается после обновления конкретного свойства
метод mount,
который выполняется при инициализации компонента