Объект компонента в Livewire

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

В блоке script работает объект wire: через него видны публичные свойства компонента и можно трогать разметку на стороне браузера.

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

php artisan make:livewire PostRead --class

Давайте заведём свойство с заголовком:

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

Давайте оставим пустой блок и запишем в него значение из объекта wire:

<div id="box"></div>
@script
	document
		.getElementById('box')
		.textContent = $wire.title;
@endscript

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

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

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

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