Метод updatedFoo

Метод updatedFoo в компоненте Livewire автоматически вызывается после изменения свойства с именем foo. Это специальный хук жизненного цикла, который позволяет реагировать на обновление конкретного свойства и выполнять дополнительные действия, например, обновлять другие свойства, выполнять валидацию или отправлять запросы к серверу. Метод принимает текущее значение свойства в качестве параметра.

Синтаксис

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class ExampleComponent extends Component
	{
		public $foo;
		
		public function updatedFoo($value)
		{
			// Logic here
		}
	}
?>

Пример

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

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class NameComponent extends Component
	{
		public $name = '';
		public $processedName = '';
		
		public function updatedName($value)
		{
			$this->processedName = strtoupper($value);
		}
		
		public function render()
		{
			return view('livewire.name-component');
		}
	}
?>

<input type="text" wire:model="name" placeholder="Enter name">
<p>Processed: {{ $processedName }}</p>

При вводе текста в поле, метод updatedName преобразует значение в верхний регистр и сохраняет в свойство $processedName. Результат выполнения кода при вводе 'john':

<input type="text" placeholder="Enter name">
<p>Processed: JOHN</p>

Пример

Метод updatedFoo может выполнять валидацию и изменять другие свойства в зависимости от значения:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class ProductComponent extends Component
	{
		public $quantity = 1;
		public $price = 10;
		public $total = 10;
		
		public function updatedQuantity($value)
		{
			if ($value < 1) {
				$this->quantity = 1;
				$value = 1;
			}
			
			$this->total = $value * $this->price;
		}
		
		public function render()
		{
			return view('livewire.product-component');
		}
	}
?>

<input type="number" wire:model="quantity" min="1">
<p>Price: ${{ $price }}</p>
<p>Total: ${{ $total }}</p>

При изменении количества, метод пересчитывает итоговую сумму. Если ввести значение меньше 1, оно будет автоматически исправлено. Результат выполнения кода при вводе '3':

<input type="number" min="1">
<p>Price: $10</p>
<p>Total: $30</p>

Пример

Метод может получать как новое значение свойства, так и старое значение при указании второго параметра:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class LoggerComponent extends Component
	{
		public $status = 'draft';
		public $log = '';
		
		public function updatedStatus($value, $old)
		{
			$this->log = "Status changed from {$old} to {$value}";
		}
		
		public function render()
		{
			return view('livewire.logger-component');
		}
	}
?>

<select wire:model="status">
	<option value="draft">Draft</option>
	<option value="published">Published</option>
	<option value="archived">Archived</option>
</select>
<p>Log: {{ $log }}</p>

При изменении статуса, метод сохраняет сообщение с указанием старого и нового значения. Результат выполнения кода при выборе 'published':

<select>
	<option selected>Draft</option>
	<option>Published</option>
	<option>Archived</option>
</select>
<p>Log: Status changed from draft to published</p>

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

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