In this episode, we dive straight into working with forms in Livewire, which is a super important part of pretty much any app. We'll start simple: our main goal is to get some input (like a book title) into a form and see how Livewire binds that data so we can use it later—like, eventually, creating new records in our database and keeping our book list updated.
We'll build our form right in the book index component for now (don't worry, we'll split it up for better structure later). You'll see how easy it is to set up a standard HTML form, and more importantly, how Livewire lets us connect our form inputs to data properties in the component using wire:model
. We talk about how this two-way binding works—if you've used other frameworks like Vue, this will feel familiar.
There's a key difference between Livewire versions: in Livewire 3, data isn't synced to the backend on every keystroke by default (which saves on network requests), unlike previous versions. We'll see how adding "modifiers" to wire:model
can bring back more live updates when you need them, like for a search field.
The episode also shows you how to handle form submissions by adding wire:submit.prevent
to the form. This avoids the default browser behavior and lets you run a method in your component directly when the form's submitted. You'll be able to access the input data easily in your method, and we even use dd
(die and dump) to check that what we're getting from the form is exactly what we expect.
By the end of the episode, you'll understand the basics of binding form data in Livewire, handling submits, and controlling when component data updates. Next time, we'll actually save the new book to the database!