In this video we are going to learn about Livewire Property Binding.
So lets see how can we bind the property.
First of all lets create new component.
So switch to command prompt and run the command.
Now run the applicaton , so just type here
Now switch to the project and lets open form.blade.php view file.
Now inside this component view file lets
Create input text field, so just write here
Now go to the component class file And here lets create a property here.
Now lets bind this property to the input text field
For binding with property just add here
Now lets display this property on component view.
So go to the form.blade.php view file and here just write
Alright now lets create the route for this component.
So go to the web.php file and create the route.
Now lets 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 lets enter any name like Smith john.
And here you can see this value Name :Smith John.
Now lets see how can bind property with textarea, radio button ,checkbox and select.
So go to the component view file and lets add here Textarea, Radio button, Checkbox, and select control.
Now go to the component class and create some properties
Now lets bind these property
So go to the component view file and bind these properties with the form control as following.
Now lets display these property
So just write here
Alright now lets 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 cheked this you can see here the single if I check married you can see the married here.
Now check the checkbox if I checked red you can see the red here,now check this and this and you can see the all three color.
Now select the fruit.
And here you can see the selected fruit.
Alright In this property binding one drawback is, it consume more resource.
Let see how it consume more resource.
For that just open network tab in browser and now.
Just type text in input text field.
And here you can see for every character its sending the request to the server which is not good.
For preventing this each character request.
We can use .debounce.500ms modifier.
For using this modifier go to the form.blade.php view file and lets use debounce as following
And here delay time in millisecond.
Lets add here 1000ms it means 1 sec.
1000milli sec = 1 sec.
Now save this and lets check.
Just referesh the page.
And now enter the text here.
You can see here now sending the request after 1 second not after each character typing.
You can increase or decrease timing according to your requirement.
So in this way we can bind property in livewire.
So lets see how can we bind the property.
First of all lets create new component.
So switch to command prompt and run the command.
php artisan make:livewire Form
Now run the applicaton , so just type here
php artisan serve
Now switch to the project and lets open form.blade.php view file.
Now inside this component view file lets
Create input text field, so just write here
Name <br/>
<input type=“text” />
Now go to the component class file And here lets create a property here.
public $name;
Now lets bind this property to the input text field
For binding with property just add here
Name <br/>
<input type=\"text\" wire:model=\"name\" />
Now lets display this property on component view.
So go to the form.blade.php view file and here just write
Name: {{$name}}
Alright now lets create the route for this component.
So go to the web.php file and create the route.
Route::get(‘/form’,Form::class);
Now lets 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 lets enter any name like Smith john.
And here you can see this value Name :Smith John.
Now lets see how can bind property with textarea, radio button ,checkbox and select.
So go to the component view file and lets add here 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 lets bind these property
So go to the component view file and bind these properties with the form control as following.
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 lets display these property
So just write here
Alright now lets 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 cheked this you can see here the single if I check married you can see the married here.
Now check the checkbox if I checked red you can see the red here,now check this and this and you can see the all three color.
Now select the fruit.
And here you can see the selected fruit.
Alright In this property binding one drawback is, it consume more resource.
Let see how it consume more resource.
For that just open network tab in browser and now.
Just type text in input text field.
And here you can see for every character its sending the request to the server which is not good.
For preventing this each character request.
We can use .debounce.500ms modifier.
For using this modifier go to the form.blade.php view file and lets use debounce as following
Name <br/>
<input type=\"text\" wire:model.debounce.1000ms=\"name\" />
And here delay time in millisecond.
Lets add here 1000ms it means 1 sec.
1000milli sec = 1 sec.
Now save this and lets check.
Just referesh the page.
And now enter the text here.
You can see here now sending the request after 1 second not after each character typing.
You can increase or decrease timing according to your requirement.
So in this way we can bind property in livewire.
