Директива @this

Директива @this в Blade-шаблоне Livewire предоставляет доступ к JavaScript-объекту текущего компонента. Она позволяет вызывать методы компонента, получать доступ к его свойствам и выполнять другие операции прямо из JavaScript-кода, встраиваемого в шаблон.

Синтаксис

<script>
	@this.methodName();
	@this.property;
</script>

Пример

Давайте создадим компонент с числом $num и методом inc, а затем вызовем этот метод через директиву @this по клику на кнопку:

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

<div>
	<button onclick="@this.inc()">
		+
	</button>
	<span>{{ $num }}</span>
</div>

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

<button>
	+
</button>
<span>1</span>

Пример

Директива @this также позволяет получать значения свойств компонента. Выведем текущее значение свойства $num в консоль при загрузке страницы:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class Counter extends Component
	{
		public $num = 10;
		
		public function render()
		{
			return view('livewire.counter');
		}
	}
?>

<div>
	<span>{{ $num }}</span>
	
	<script>
		console.log(@this.num);
	</script>
</div>

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

"10"

Пример

Можно использовать @this для вызова методов с передачей параметров. Создадим метод setNum, принимающий значение, и вызовем его из JavaScript:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class Counter extends Component
	{
		public $num = 0;
		
		public function setNum($value)
		{
			$this->num = $value;
		}
		
		public function render()
		{
			return view('livewire.counter');
		}
	}
?>

<div>
	<span>{{ $num }}</span>
	
	<button onclick="@this.setNum(100)">
		Set 100
	</button>
</div>

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

<button>
	Set 100
</button>
<span>100</span>

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

директиву @livewire,
которая инициализирует компонент в HTML
директиву @livewireStyles,
которая подключает стили Livewire
директиву @livewireScripts,
которая подключает скрипты Livewire
директиву @script,
которая позволяет выполнять JavaScript-код в компоненте