Learn Livewire
Playing
03. Properties and methods

Episodes

0%
Your progress
  • Total: 2h 52m
  • Played: 0m
  • Remaining: 2h 52m
Join or sign in to track your progress

Transcript

00:00
OK, so we've got a very basic Livewire component on the page here. Let's go ahead and make this a little bit more interesting. So the first thing that we're going to do is head over to the example
00:10
component, so the actual Livewire component itself. Now inside of here we're going to talk about two things. We're going to talk about properties and methods within our Livewire components, which is the majority of the time what you're going to be doing.
00:24
Properties are exactly what you'd expect. They're just properties within this class, and if we make these public the template, the example template, can actually access these. So let's just look at a really example of a quick example of that for now. So I'm going to go ahead and create out
00:39
a counter variable in here, and I'm going to assign that the default value of zero. Now let's just go ahead and index our workspace here to get rid of that, and we can now use this on our template. So if we head over to our example.blade.phptemplate
00:55
we can just output this like a normal variable. So not really that interesting at the moment. Let's go ahead and say counter, and if we head over to our app, sure enough we see zero. So the point of this is that now we have a counter that when we update within
01:11
this class will be updated within our template, and we're going to look at our network tab to see kind of what's going on behind the scenes in just a second. So we need a method that we can use from our template to increment this counter. So let's go
01:25
ahead and just create our really simple method like we normally would. So nothing really specific to Livewire just yet. We're going to go ahead and take that counter, and we can either do plus plus or reassign it. So we've now got a method in here.
01:38
Where do we call this method from? Well we call it from our view. So let's go over to our example view, and we'll go ahead and create out a button down here, and just say increment. Now how do we call this? Well what we can do is we can use
01:53
wire, click, and there are several event handlers in Livewire which we're going to be taking a look at throughout the course. Then we just give the name of the method. So let's go ahead and increment that when we click on that button. So that's pretty much it.
02:08
We've now got a two-way relationship between this component and this view. So let's go over and try this out, and I'm going to hit increment, and you can see sure enough without any page refreshes or anything like that, this value is changing. So how is this
02:26
working behind the scenes? Well let's go ahead and open up our network tab, just so we can have a look here. I'm going to go ahead and filter this by XHR Fetch Request, since essentially what Livewire is doing when we click on this,
02:38
using Alpine and the JavaScript functionality of Livewire, it's making a request to our back end to update this value, and then rehydrate what we see on the client side. So let's go ahead and hit increment, and you can see sure enough we have an
02:53
update request, and this is pretty standard. This is just what's going to happen for every single action that you take that needs to update something. So if we take a look inside of the preview of this, we've got a couple of things. We've got
03:05
this snapshot just here, we've got the effects as well, but the most important thing that we want to focus on here is the HTML. So what's happened is Livewire, when we click this on the client side, is sending a request through, matching up to that component with its
03:21
state, and then it's returning us some new HTML that gets hydrated onto the client side. So kind of think of it like a standard client and API application that are completely separate. The client has an initial state, it maybe
03:38
even reads from the API. When we do something, we send a request to the API that gives us fresh data back, and then we replace that data on the client side. In a very simple way, that's pretty much all that is happening when we're working with Livewire, and
03:52
of course we don't get any page refreshes, because this HTML is just hydrating into this component that we've just created here. We can have multiple components within Livewire, they can interact with each other,
04:05
and anytime we change anything, or specifically say we want something to be updated, Livewire is going to rehydrate everything for us. So really what we're doing here is we're just calling a method and updating something.
04:19
Livewire is taking care of making sure those changes get reflected on the client side. So that is, in a nutshell, what Livewire is actually doing. There's a little bit more going on behind the scenes, but if you're working with Livewire,
04:32
really that's all you need to know until you start getting into some more advanced stuff. So there we go, we have built now a dynamic component which increments, and hopefully we understand a little bit about what is going on here to actually make this happen.

Episode summary

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!

Episode discussion

No comments, yet. Be the first!