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

Директива wire:text позволяет динамически устанавливать текстовое содержимое элемента. Она работает аналогично двустороннему связыванию, но только для отображения текста. Директива принимает имя свойства компонента, значение которого будет автоматически отображаться и обновляться при изменении данных.

Синтаксис

<div wire:text="property">Initial text</div>

Пример

Давайте создадим компонент, который отображает текущее значение свойства $message и обновляет его при нажатии кнопки:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class MessageDisplay extends Component
	{
		public $message = 'Hello world';
		
		public function updateMessage()
		{
			$this->message = 'Updated message';
		}
		
		public function render()
		{
			return view('livewire.message-display');
		}
	}
?>

<div>
	<div wire:text="message">Initial text</div>
	<button wire:click="updateMessage">Update</button>
</div>

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

<div>
	<div>Updated message</div>
	<button>Update</button>
</div>

Пример

Рассмотрим использование директивы с числовым значением:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class CounterDisplay extends Component
	{
		public $counter = 0;
		
		public function increment()
		{
			$this->counter++;
		}
		
		public function render()
		{
			return view('livewire.counter-display');
		}
	}
?>

<div>
	<span wire:text="counter">0</span>
	<button wire:click="increment">+1</button>
</div>

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

<div>
	<span>5</span>
	<button>+1</button>
</div>

Пример

Использование директивы для отображения содержимого массива:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class ArrayDisplay extends Component
	{
		public $items = ['a', 'b', 'c'];
		public $index = 0;
		
		public function nextItem()
		{
			$this->index = ($this->index + 1) % count($this->items);
		}
		
		public function render()
		{
			return view('livewire.array-display');
		}
	}
?>

<div>
	<div wire:text="items[index]">a</div>
	<button wire:click="nextItem">Next</button>
</div>

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

<div>
	<div>b</div>
	<button>Next</button>
</div>

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

директиву wire:model,
которая обеспечивает двустороннее связывание данных
директиву wire:bind,
которая связывает HTML-атрибуты со свойствами компонента
директиву wire:click,
которая обрабатывает клики по элементу
директиву wire:loading,
которая управляет отображением во время загрузки