Метод из скрипта в Livewire

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

Вызов метода через объект wire отправляет на сервер уже готовую операцию компонента, а скрипт лишь решает, когда её запустить.

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

php artisan make:livewire PostSave --class

Давайте заведём свойство результата и метод сохранения:

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

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

<div>
	<button id="save-btn">
		Save
	</button>
	<div>{{ $saved }}</div>
</div>
@script
	document
		.getElementById('save-btn')
		.addEventListener('click', () => {
			$wire.save();
		});
@endscript

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

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

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

Создайте компонент EmployeeSave. Кнопка в браузере вызывает сохранение работника на сервере.