Привязка поля к свойству в Livewire

Поле на странице можно нарисовать в шаблоне, и человек наберёт в нём текст. Класс компонента об этом не узнает: пока между полем и свойством нет связи, на сервере по-прежнему пустая строка.

Атрибут wire:model задаёт эту связь: значение поля читается в указанное публичное свойство. Без модификатора привязка отложенная: свойство обновится не на каждую букву, а когда уйдёт запрос к компоненту. Пока запроса не было, под полем видно старое значение из свойства.

Давайте соберём форму поста на /posts. Создадим классовый компонент PostForm:

php artisan make:livewire PostForm --class

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

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

Страница posts.blade.php вставит компонент в макет:

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

В классе заведём свойство заголовка и пустой метод apply, который запускает обновление по кнопке:

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

В шаблоне свяжем поле с $title, выведем свойство под полем и добавим кнопку, которая вызывает apply:

<div>
	<input type="text" wire:model="title">
	<button type="button" wire:click="apply">
		Apply
	</button>
	<div>{{ $title }}</div>
</div>

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