Объект $wire
Объект $wire доступен в JavaScript-коде внутри компонента Livewire
и предоставляет интерфейс для взаимодействия с компонентом.
Через него можно вызывать публичные методы компонента, получать
и изменять значения свойств, а также управлять жизненным циклом.
Объект автоматически создается для каждого экземпляра компонента
и доступен как глобальная переменная $wire внутри представления.
Вызов метода компонента
Основное назначение объекта $wire - вызов публичных методов
компонента из JavaScript. Метод call принимает имя метода
и опциональные аргументы, которые будут переданы в метод компонента.
<?php
namespace AppLivewire;
use Livewire\Component;
class Counter extends Component
{
public $num = 0;
public function inc($step = 1)
{
$this->num += $step;
}
public function render()
{
return view('livewire.counter');
}
}
?>
<div>
<span>{{ $num }}</span>
<button onclick="$wire.call('inc', 5)">+5</button>
</div>
Результат выполнения кода:
<div>
<span>5</span>
<button>+5</button>
</div>
Получение свойств
Объект $wire позволяет получать значения публичных свойств
компонента через метод get. Метод возвращает Promise,
поэтому результат обрабатывается в асинхронном коде.
<?php
namespace AppLivewire;
use Livewire\Component;
class Counter extends Component
{
public $num = 10;
public $text = 'abcde';
public function render()
{
return view('livewire.counter');
}
}
?>
<div>
<button onclick="getNum()">Get num</button>
</div>
<script>
async function getNum()
{
const num = await $wire.get('num');
const text = await $wire.get('text');
console.log(num, text);
}
</script>
Результат выполнения кода:
"10 abcde"
Установка свойств
Метод set позволяет установить новое значение
публичного свойства компонента. После установки
Livewire автоматически обновляет представление.
<?php
namespace AppLivewire;
use Livewire\Component;
class Counter extends Component
{
public $num = 0;
public $text = 'abcde';
public function render()
{
return view('livewire.counter');
}
}
?>
<div>
<span>{{ $num }}</span>
<span>{{ $text }}</span>
<button onclick="$wire.set('num', 10)">Set num</button>
</div>
Результат выполнения кода:
<div>
<span>10</span>
<span>abcde</span>
<button>Set num</button>
</div>
Одновременная установка нескольких свойств
Метод set также может принимать объект
с несколькими свойствами для массового обновления.
<?php
namespace AppLivewire;
use Livewire\Component;
class Counter extends Component
{
public $num = 0;
public $text = 'abcde';
public function render()
{
return view('livewire.counter');
}
}
?>
<div>
<span>{{ $num }}</span>
<span>{{ $text }}</span>
<button onclick="$wire.set({num: 20, text: 'xyz'})">Set both</button>
</div>
Результат выполнения кода:
<div>
<span>20</span>
<span>xyz</span>
<button>Set both</button>
</div>
Принудительное обновление
Метод refresh принудительно обновляет
представление компонента, даже если изменения
не были обнаружены автоматически.
<?php
namespace AppLivewire;
use Livewire\Component;
class Counter extends Component
{
public $num = 0;
public $arr = [1, 2, 3, 4, 5];
public function render()
{
return view('livewire.counter');
}
}
?>
<div>
<span>{{ $num }}</span>
<button onclick="updateAndRefresh()">Update</button>
</div>
<script>
async function updateAndRefresh()
{
$wire.num = 15;
await $wire.refresh();
}
</script>
Результат выполнения кода:
<div>
<span>15</span>
<button>Update</button>
</div>
