Events are probably the most important part of web applications because, after all, that's how users interact with their applications. But if Livewire is supposed to allow us to write modern applications without leaving php, how do we listen for and use events? Well, that is where the idea of actions come into play. An action is really nothing more than a public method on our component class. So I'm going to write an action called changeName. And all we are going to do right now is set a new value for our name property. Let's just set it to Jeffrey. But then the question becomes, how do we execute this method from the browser?

Let's just set it to Jeffrey. But then the question becomes, how do we execute this method from the browser? Well, it's actually quite easy. Let's do this first. Let's add another div element that's going to contain our message. And then we will add another div. But let's give this some top margin. And inside of this div element, we will have a button. Let's make the text white. Let's give it a medium font.

Let's make the text white. Let's give it a medium font. We'll have rounded corners. Let's use medium. Let's give it some horizontal padding, some vertical padding. But then, of course, we need to be able to see this. So let's give it a background color of blue. And then for the text, we'll just say greet. So yeah, there we go. That's perfectly fine.

So yeah, there we go. That's perfectly fine. But of course, that doesn't answer our question, how do we execute our action? But it's actually quite simple. In a typical application, we would listen for the click event. But with Livewire, we say wire:click. And then the value is the name of the action that we want to execute, which is changeName in this case. So whenever I click on the greet button, we should see the name changed to Jeffrey. And we can just refresh.

So whenever I click on the greet button, we should see the name changed to Jeffrey. And we can just refresh. We can click greet. And we can keep doing this all day long. But of course, that's not very useful. Instead, we would want to be able to change the name to really anything. So we could say that, OK, we will pass a new name to the changeName action so that we will set the name property to whatever that value is. And that means whenever we listen for the click events and call changeName, we need to pass in a new value.

And that means whenever we listen for the click events and call changeName, we need to pass in a new value. So let's pass in Jeffrey once again. And inside of the browser, we see the name changed to Jeffrey. We can change it to James. And it's not perfect, but it's at least a step in the right direction. But before we go any further, let's look at how this works. Let's pull up the developer tools. Let's first of all inspect our component. So here, we have a div element.

Let's first of all inspect our component. So here, we have a div element. It has wire:snapshot. And then we can see the data for this particular component. We see that we have a name property set to Jeremy. And then there's some other stuff. But then we have a wire:ID with a value. We have our message. And then if we would expand this div element, we would see our button and everything else.

And then if we would expand this div element, we would see our button and everything else. Whenever we click on the greet button, we will see all of that change. That snapshot went away to where now we just have the wire ID. But now we have a different message, hello, James. And once again, if we expanded this div element, we would see our button. But that really doesn't tell us how this works. Let's go to the network tab. Let's clear out everything. And then let's click on the greet button.

Let's clear out everything. And then let's click on the greet button. We will see that there is a POST request initiated from Livewire.js. If we inspect this, we see that the request was made to Livewire/update. So anytime a Livewire component needs to update, it is going to send a request to this URL. But of course, the data is going to vary based upon the component and the data that is going to be updated. So if we take a look at the request payload, we can see that it is a JSON structure that has a components array.

So if we take a look at the request payload, we can see that it is a JSON structure that has a components array. There is one element that calls a method called changeName. It's passing in a value of James, and then there's this snapshot data once again. And if we take a look at the response, we will see something similar. A components array that has one element inside of it, but now we see completely different data. The snapshot data now has the name value of James, and there's a bunch of other stuff. And if we look at the effects here, we see that there's this HTML,

there's a bunch of other stuff. And if we look at the effects here, we see that there's this HTML, where the wire:id is now this VTK whatever. And then everything else is the HTML that is now inside of the DOM. So if we inspect this once again, we will see this wire:id of VTK and everything else is from that response payload. And when you think about it, it makes sense. If we need to execute code on the server, we have to make a request to initiate that execution. It's just really cool how it's all done for us behind the scenes.

we have to make a request to initiate that execution. It's just really cool how it's all done for us behind the scenes. And all we really had to do is use a single attribute. Now, let's make this a lot better, because we want the User to be able to change the name themselves. So let's add an input element. I'm going to use w-full. We'll have some padding, a border, it'll have rounded corners. Let's give it a background color of gray, and then the text needs to be white so that we can see it.

Let's give it a background color of gray, and then the text needs to be white so that we can see it. So we will have this input element. But then the question becomes, how do we get the value from the input element and pass that to our change name action? Well, the most straightforward thing to me is to just add an ID. We can call this newName so that inside of our click event handler, we could use document.querySelector. We want to select the element with an ID of newName and get its value. So if we type a value inside of our text box and click greet,

We want to select the element with an ID of newName and get its value. So if we type a value inside of our text box and click greet, we can see that the name changes. Let's change it to James and John. And that functionality is fine for most people. I mean, most people are going to type a name and then click on the button. But then there's people like me who like to keep their hands on the keyboard as much as possible. So I want to be able to type the name and then press Enter in order to change the name.

So I want to be able to type the name and then press Enter in order to change the name. Now, we can easily accommodate that functionality by using a form because, well, that's the default functionality of a form. All we have to do is set the button's type to submit and then wrap all of this within a form. But by doing this, we don't necessarily need to listen for the click event on the button. We need to listen for the submit event on our form. And we can do that because when it comes to Livewire actions,

We need to listen for the submit event on our form. And we can do that because when it comes to Livewire actions, we can listen for just about any event. So in this case, we want to say wire:submit. But the action is going to be the same. So that we can type in Jeffrey and click on the button. The name changes. We can type James and I can press the Enter key and it changes. So to use actions in your Livewire component, you need a few things. First of all, you need a public method.

So to use actions in your Livewire component, you need a few things. First of all, you need a public method. Because remember from the previous lesson, if you want to use it inside of your view, it needs to be public. So you need a public method. And then you need to set up that action using a wire attribute. It's simply wire: followed by a colon. And then whenever browser events you want to listen for. Now, while our current implementation works, there is a better way that we can change the name in our message.

Now, while our current implementation works, there is a better way that we can change the name in our message. And we will look at how in the next episode.