Свойство из скрипта в Livewire

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

Запись в свойство через объект wire меняет публичное поле компонента на клиенте, и Livewire подтягивает это значение в шаблон без отдельного вызова метода на сервере.

Страница откроется по адресу /posts/title. Давайте создадим компонент PostTitle:

php artisan make:livewire PostTitle --class

Давайте начнём с пустого заголовка:

<?php
	namespace App\Livewire;
	
	use Livewire\Component;
	
	class PostTitle extends Component
	{
		public $title = '';
		
		public function render()
		{
			return view('livewire.post-title');
		}
	}
?>

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

<div>
	<button
		onclick="$wire.title = 'News'"
	>
		Set
	</button>
	<div>{{ $title }}</div>
</div>

Давайте добавим маршрут и страницу:

<?php
	Route::get('/posts/title', function () {
		return view('posts-title');
	});
?>

<x-layout>
	<livewire:post-title />
</x-layout>

Создайте компонент EmployeeTitle. Кнопка в браузере подставляет имя работника в свойство компонента.