Несохранённые изменения в Livewire

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

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

Давайте создадим компонент PostDraft:

php artisan make:livewire PostDraft --class

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

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

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

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

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

Давайте выведем поле и метку несохранённого:

<div>
	<input
		type="text"
		wire:model.live="title"
	>
	<span wire:dirty>
		Unsaved
	</span>
</div>

Создайте компонент EmployeeDraft. Когда имя работника отличается от исходного, на странице видна подпись.