In this episode, we make our first Livewire component more interesting by introducing properties and methods. We start by defining a public property called counter
in our component and learn how this gets automatically exposed to our Blade template — so we can show its value in the browser with a simple variable reference.
Next, we add a method to our component that increments that counter value. Then, in our Blade view, we place a button and wire it up to this method using Livewire's wire:click
directive. This lets us call component methods directly from our view without needing any extra JavaScript.
After clicking the button, we see the counter change live on the page — no refresh necessary! To demystify what’s happening, we pop open the browser’s network tab: Livewire is sending an AJAX request back to the server, updating the property and returning fresh HTML, which gets rehydrated into our component seamlessly.
By the end, you’ll really understand the basic two-way binding Livewire provides between your PHP class and Blade template, and how properties and methods tie everything together. This is the fundamental magic that powers Livewire, and most of your day-to-day components will work exactly like this!