We ended the previous episode with code that works, but it's not ideal, because remember that the idea behind Livewire is to build modern web applications without leaving php. And we kind of did. We wanted to execute code on the server, but in order to do so, we used JavaScript to grab the value of an input element so that we could pass that on to the server. It works, but there's a better way. And if you are familiar with Vue or React or any of the UI frameworks, the solution is going to look very familiar to you. Because what we essentially want to do is bind the value of the input element to the name property on our Greeter class.

Because what we essentially want to do is bind the value of the input element to the name property on our Greeter class. And we can easily do that by adding the wire:model attribute to the input element and its value is the name of the property that we want to bind it to. So this is now bound to the name property in our Greeter class. And this is a two-way binding. So whatever changes the name property in the class is going to be reflected in the browser and vice versa. Now this means that our changeName method no longer needs to accept a value because it is automatically going to be updated because the input value is bound to the name property.

Now this means that our changeName method no longer needs to accept a value because it is automatically going to be updated because the input value is bound to the name property. However, we still need the changeName method because we still need to essentially initiate the update that is sent to the server. So we still need to submit the form, but because the input element is bound to the name property, that information is automatically going to be sent as part of the update. So in the browser, we can automatically see that my name is populated in the input element. If we change the name property value to Jeffrey, we will see that updated as well. But let's do this. Let's have an empty string as our default value so that we can type anything inside.

But let's do this. Let's have an empty string as our default value so that we can type anything inside of our input element, submit the form, and of course, the greeting changes. Hello, James. If we change it to John, hello, John, Jeremy, or whatever name is, of course, going to work just fine. Now do notice, however, that as I type, the name as it is rendered in the browser is not automatically updated with every keystroke. That's because we haven't initiated an update to the server until we submit the form. And this is the default behavior, which is what we want most of the time.

That's because we haven't initiated an update to the server until we submit the form. And this is the default behavior, which is what we want most of the time. However, there will be instances where we want to update with every keystroke, and we can easily do that. With the wire:model attribute, we will add a modifier, .live. And now with every keystroke, we will see the name property automatically updated within the browser. Now in order for this to work, an update has to be sent to the server with every keystroke. So yes, this is really cool, but this isn't really the functionality or the behavior that we would want, except for certain circumstances.

So yes, this is really cool, but this isn't really the functionality or the behavior that we would want, except for certain circumstances. Like this would be great for a search box, but really, I would make the argument that we don't need a live update. Instead, we would need to debounce it so that there would be a slight delay. It's almost as good as live updating, but it's a little more efficient, at least as far as what is going across the wire. And we can see here that it's still updating, just not as much as it was before. And I believe the default is 150 milliseconds, but we can also modify that by using another modifier.

And I believe the default is 150 milliseconds, but we can also modify that by using another modifier. So let's say we wanted to use a debounce value of 1,000 milliseconds, or basically one second. So that means an update is not going to be sent to the server until one second has passed. Now there are other modifiers that we could use. One that could be very useful is the change modifier, which means that the update is not going to be sent until the change event fires on this element, which in this case is whenever we blur the form control. That's just the default behavior, but that's not going to work for some elements, in which case you could use the blur modifier.

That's just the default behavior, but that's not going to work for some elements, in which case you could use the blur modifier. But let's do this. I want to add a select box, one so that we could choose the actual greeting. So let's go back to our Greeter class. Let's add a public property called greeting. We will initialize that as an empty string as well. And we're going to modify our form. In fact, I'm just going to copy the input element, which by the way, we no longer need the ID.

In fact, I'm just going to copy the input element, which by the way, we no longer need the ID. So let's get rid of that. And I'm just going to change this to a select element. The styling is going to be mostly the same, except that it's not going to be block or full width. I need to change that on the input element as well. The model is going to be greeting. And then we need some options for this select box. And I'm just going to paste those in.

And then we need some options for this select box. And I'm just going to paste those in. We have hello, hi, hey, and howdy. So let's save that. We now have our select box to choose our greeting, and then the name of the person that we want to greet. So we can say, hello, Jeffrey. Or if we wanted to say, howdy, Jeremy, we could have done that. But of course, we also need to use our greeting here in our message. So let's add that right fast.

But of course, we also need to use our greeting here in our message. So let's add that right fast. But with that in place, now we start off with, well, this string that really means nothing whatsoever. So we should do this. I'm going to move this to the bottom so that we have our form first. Then we will have our message, but I'm going to add an if. If the name is not an empty string, then we are going to display our greeting. And that way, we don't have this inside of the browser. So now we can go to the browser, we can say, hello, Jeremy.

And that way, we don't have this inside of the browser. So now we can go to the browser, we can say, hello, Jeremy. And well, we're halfway there. We see the name, but we don't see the greeting. But look at this, if we change the value to high, submit the form, we now see the greeting and the name. If we go back to hello, we see the greeting and the name. And let's do this, let's add some margin to the top there. I think five ought to be good. So what's the problem then?

I think five ought to be good. So what's the problem then? Why does it not work the first time? But whenever we change the value of the greeting, then it starts to work. We see this behavior because there's a mismatch between the value of the greeting property in our class and the select element inside of the HTML. If we take a look at the web page, whenever we refresh the page, hello is selected by default. But that's not really surprising, because we haven't explicitly set anything as being selected.

But that's not really surprising, because we haven't explicitly set anything as being selected. So the browser is going to select the first item. But if we look at the Greeter class, greeting is initialized as an empty string. So really, it doesn't matter which of these options is selected by default inside of the HTML, it's still not going to work. We can see that hello is still being selected, even though I have explicitly set hey as selected. So we can solve this in a couple of different ways. The first is to just set the default value inside of our class.

So we can solve this in a couple of different ways. The first is to just set the default value inside of our class. Now, I've set it as hello, and it doesn't look like anything changed. But whenever I submit the form, we see the greeting and the name. So everything works like we would expect it to. But I don't necessarily like that approach. I mean, it works, and there are some cases where I would want to do this. But really, I would want an empty string here. Because in this particular case, I want the HTML to be the source of truth, really. So we can add a modifier called fill whenever we set up the model for

Because in this particular case, I want the HTML to be the source of truth, really. So we can add a modifier called fill whenever we set up the model for our select element. And this is going to use the initial value of this select element as the value for the greeting property. So with that simple change right there, it doesn't look like anything changed in the browser. But whenever we submit the form, we now have the greeting as well as the name. And of course, we can change the greeting, and everything is going to work like we would expect.

And of course, we can change the greeting, and everything is going to work like we would expect. We can also use the selected attribute, and we can see that now Howdy is selected by default. Let's provide a name, let's submit the form, and we see our message. Now, there are merits to both of these approaches. Since my options are defined here inside of my HTML, it makes more sense to use the fill modifier. However, if I were building these options based upon data from the class, well, then it would make more sense to set the default value here.

However, if I were building these options based upon data from the class, well, then it would make more sense to set the default value here. It's just really up to you and your particular circumstance. So Livewire gives us the ability to bind data from our class to our HTML elements, and it's a two-way binding. All we need to do is use the wire:model attribute, and we can use a variety of modifiers. The live modifier is useful if we need to update for every keystroke or every action that's occurring. But be careful with that because it can be very noisy across the wire.

every keystroke or every action that's occurring. But be careful with that because it can be very noisy across the wire. We can also use the fill modifier to initialize our class property with the initial value in the HTML.