Laravel 8 Tutorial - Livewire Property Binding

In this tutorial, we are going to learn about Livewire Property Binding.

So, let's see how we can bind a property.

First of all, let's create a new component. So, switch to the command prompt and run the command:

php artisan make:livewire Form

Now, run the application, so just type here:

php artisan serve

Now, switch to the project and let's open the form.blade.php view file.

Now, inside this component view file, let's create an input text field, so just write here:

Name 

<input type="text"  />

Now, go to the component class file and here, let's create a property here:

public $name;

Now, let's bind this property to the input text field. For binding with a property, just add here:

Name 

<input type="text" wire:model="name"  />

Now, let's display this property on the component view. So, go to the form.blade.php view file and here, just write:

Name: {{$name}}

Alright, now let's create the route for this component. So, go to the web.php file and create the route:

Route::get('/form',Form::class);

Now, let's check it. So, switch to the browser and just go to the URL: http://localhost:8000/form. And you can see here the input text field.

Now, let's enter any name, like "Smith John". And here, you can see this value: "Name: Smith John".

Now, let's see how we can bind a property with a textarea, radio button, checkbox, and select. So, go to the component view file and let's add here a textarea, radio button, checkbox, and select control:

Message:<br>
<textarea ></textarea><br>
Marital Status: <br>
Married <input type="radio" value="Single" />
Unmarried <input type="radio" value="Married" /><br>
Favourite Color:<br>
Red <input type="checkbox" value="red" /><br>
Green <input type="checkbox" value="green" /><br>
Blue <input type="checkbox" value="blue" /><br>
Favourite Fruit:<br>
<select >
    <option value=''>Select Fruit</option>
    <option value='apple'>Apple</option>
    <option value='mango'>Mango</option>
    <option value='banana'>Banana</option>
</select> 

Now, go to the component class and create some properties:

public $message;
public $marital_status;
public $selected;
public $fruits;

Now, let's bind these properties. So, go to the component view file and bind these properties with the form control as follows:

Message:<br>
<textarea wire:model ="message"></textarea><br>
Marital Status: <br>
Married <input type="radio" wire:model="marital_status" value="Single" />
Unmarried <input type="radio" wire:model="marital_status" value="Married" /><br>
Favourite Color:<br>
Red <input type="checkbox" wire:model = "selected" value="red" /><br>
Green <input type="checkbox" wire:model = "selected" value="green" /><br>
Blue <input type="checkbox" wire:model = "selected" value="blue" /><br>
Favourite Fruit:<br>
<select wire:model = "fruits">
    <option value=''>Select Fruit</option>
    <option value='apple'>Apple</option>
    <option value='mango'>Mango</option>
    <option value='banana'>Banana</option>
</select> 

Now, let's display these properties. So, just write here:

Alright, now let's check. So, switch to the browser and just refresh the page.

Now, enter the name here. And here, you can see the name.

Now, type the message here. See the message here.

Check the radio button. If I check this, you can see here the "single". If I check "married", you can see the "married" here.

Now, check the checkbox. If I check "red", you can see the "red" here. Now, check this and this, and you can see all three colors.

Now, select the fruit. And here, you can see the selected fruit.

Alright, in this property binding, one drawback is that it consumes more resources. Let's see how it consumes more resources.

For that, just open the network tab in the browser and now, just type text in the input text field. And here, you can see that for every character, it's sending a request to the server, which is not good.

For preventing this each character request, we can use the .debounce.500ms modifier.

For using this modifier, go to the form.blade.php view file and let's use debounce as follows:

Name 

<input type="text" wire:model.debounce.1000ms="name"  />

And here, delay time in milliseconds. Let's add here 1000ms, which means 1 second. 1000 milliseconds = 1 second.

Now, save this and let's check. Just refresh the page.

And now, enter the text here. You can see here that it's now sending the request after 1 second, not after each character typing.

You can increase or decrease the timing according to your requirement.

So, in this way, we can bind a property in Livewire.