Объект this в JavaScript

Объект this в JavaScript-скриптах компонента Livewire предоставляет доступ к API текущего компонента. С его помощью можно вызывать методы компонента, получать и изменять его свойства, а также управлять состоянием компонента. Данный объект автоматически привязывается к экземпляру компонента и доступен внутри методов и обработчиков событий компонента.

Синтаксис

this.methodName()
this.propertyName
this.propertyName = value

Пример

Давайте вызовем метод компонента 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 x-on:click="$wire.inc()">
		+
	</button>
	<span>{{ $num }}</span>
</div>

Пример

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

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

<div>
	<button x-on:click="console.log(this.num)">
		Show num
	</button>
</div>

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

5

Пример

Давайте изменим свойство компонента $text через this и обновим шаблон:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class TextComponent extends Component
	{
		public $text = 'abcde';
		
		public function render()
		{
			return view('livewire.text-component');
		}
	}
?>

<div>
	<button x-on:click="this.text = 'xyz'">
		Change text
	</button>
	<span>{{ $text }}</span>
</div>

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

<button>
	Change text
</button>
<span>xyz</span>

Пример

Давайте вызовем несколько методов компонента последовательно с помощью this:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class Calculator extends Component
	{
		public $num = 0;
		
		public function add($val)
		{
			$this->num += $val;
		}
		
		public function multiply($val)
		{
			$this->num *= $val;
		}
		
		public function render()
		{
			return view('livewire.calculator');
		}
	}
?>

<div>
	<button x-on:click="
		this.add(10);
		this.multiply(2);
	">
		Calculate
	</button>
	<span>{{ $num }}</span>
</div>

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

<button>
	Calculate
</button>
<span>20</span>

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

свойство $wire,
которое предоставляет доступ к API компонента
метод $wire.set,
который устанавливает значение свойства компонента
метод $wire.call,
который вызывает метод компонента по имени
свойство $el,
которое ссылается на DOM-элемент компонента