To work with Livewire, you must understand what is happening under the hood.
Form Refresh without Page Refresh
In the previous lesson, I added HTML and Tailwind header/footer code. Let me show you that it is NOT reloaded when we click "Submit".
If we open the browser Network tab, we see the POST request to the /livewire/update URL.
And if we take a look at what it returns, the main thing to understand is the "html" part.
If we zoom a bit further to the right, we see this:
So, Livewire request to the server returns the HTML of the component to re-render in the browser.
Remember the structure of our main Blade file?
resources/views/companies/create.blade.php:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Simple Form</title> <script src="https://cdn.tailwindcss.com"></script></head><body class="flex items-center justify-center min-h-screen bg-gray-100"> <livewire:company-create /></body></html>So yeah, Livewire doesn't return the full HTML of that page. It returns the HTML of only the part inside <livewire:company-create /> to re-render only the component of the form.
resources/views/livewire/company-create.blade.php
<div class="w-full max-w-md p-6 bg-white rounded-lg shadow-md"> <!-- Success Alert --> @if ($savedName != '') ... @endif <!-- Form --> <form wire:submit="save"> ... </form></div>So, Livewire calls the render() method of the component class and...