Метод updated

Метод updated класса Component вызывается автоматически после обновления любого публичного свойства компонента. Он принимает два параметра: новое значение свойства и его старое значение. Этот метод полезен для выполнения побочных действий при изменении данных, таких как валидация, обновление других свойств или вызов внешних API.

Синтаксис

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class ExampleComponent extends Component
	{
		public $property;
		
		public function updated($property, $value)
		{
			// Действия после обновления свойства
		}
		
		public function render()
		{
			return view('livewire.example');
		}
	}
?>

Метод updated автоматически получает имя изменённого свойства и его новое значение.

Пример

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

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class TextComponent extends Component
	{
		public $text = '';
		public $length = 0;
		
		public function updated($property, $value)
		{
			if ($property === 'text') {
				$this->length = strlen($value);
			}
		}
		
		public function render()
		{
			return view('livewire.text-component');
		}
	}
?>

<div>
	<input type="text" wire:model="text" placeholder="Введите текст">
	<p>Длина текста: {{ $length }}</p>
</div>

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

<input type="text" placeholder="Введите текст">
<p>Длина текста: 5</p>

Пример

Специализированный метод updatedFoo вызывается только при изменении конкретного свойства foo:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class UserComponent extends Component
	{
		public $name = '';
		public $status = 'Гость';
		
		public function updatedName($value)
		{
			$this->status = $value ? 'Авторизован' : 'Гость';
		}
		
		public function render()
		{
			return view('livewire.user-component');
		}
	}
?>

<div>
	<input type="text" wire:model="name" placeholder="Введите имя">
	<p>Статус: {{ $status }}</p>
</div>

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

<input type="text" placeholder="Введите имя">
<p>Статус: Авторизован</p>

Пример

При изменении нескольких свойств можно использовать метод updated с условной логикой:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class CalculatorComponent extends Component
	{
		public $a = 0;
		public $b = 0;
		public $sum = 0;
		
		public function updated($property, $value)
		{
			if ($property === 'a' || $property === 'b') {
				$this->sum = $this->a + $this->b;
			}
		}
		
		public function render()
		{
			return view('livewire.calculator-component');
		}
	}
?>

<div>
	<input type="number" wire:model="a">
	<span>+</span>
	<input type="number" wire:model="b">
	<span>= {{ $sum }}</span>
</div>

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

<input type="number" value="5">
<span>+</span>
<input type="number" value="3">
<span>= 8</span>

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

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