In this video we are going to learn about Livewire Action.
Using livewire action we can listen to page interaction and also call a method on livewire component.
now lets see how can use livewire action.
So First of all lets create new component .
For that switch to the command prompt and for creatin new livewire component.
Just run the command


php artisan make:livewire Action


Now run the application


php artisan serve


Now switch to the project
And just open action Action.php class file.
Inside this component class file.
Lets create a property here.


public $sum;


Now lets create a function here

public function addTwoNumbers($num1,$num2)
{
$this->sum = $num1+$num2;
}


Now go to the action.blade.php view file.
And here create a button and call addTwoNumbers function on click action.


<button type=“button” wire:click=“addTwoNumbers(22,45)”>Sum</button>

{{$sum}}

Now lets check this so switch to the browser and refresh page.
Now click on submit button and here and here you can see the sum.

Now lets see the keydown action
For that lets add here textarea


<textarea></textarea>


Now go to Action.php class file and create a propery here.


public $message;


Now create a function here.


public function DisplayMessage($msg)
{
$this->message = $msg;
}

Now lets call this function on keydown action.
So go to the action.blade.php view file and inside the textarea lets add here keydown action and call the DisplayMessage function as following.


<textarea wire:keydown.enter =“DisplayMessage($event.target.value)”><textarea>


Now here lets display the message so write here after this textarea


{{$message}}


Now lets check this so switch to the browser and refresh the page.
And in textarea lets type any text.
Now here you can see the text as we typed.

Now lets see the submit action.
For that lets create a from here.

<form>
    <input type=\"text\" name=\"num1\" />
    <input type=\"text\" name=\"num2\" />
    <button type=\"submit\">Submit</button>
</form>


Now go to the Action.php class file and here lets create propery and function.

public $num1;
public $num2;
public $sum;

public function getSum()
{
$this->sum = $this->num1 + $this->num2;
}

Now go to the view file and bind these properties and lets call this getSum function on form submit event.



<form wire:submit.prevent=\"getSum\">
    <input type=\"text\" name=\"num1\" wire:model=\"num1\" />
    <input type=\"text\" name=\"num2\" wire:model=\"num2\" />
    <button type=\"submit\">Submit</button>
</form>


Also display here sum so write here


{{$sum}}


Now lets check this, so switch to the browser and refresh the page.
Now lets enter the first number and second number and then click on submit.
And on page you can see the sum of two numbers.
So in this way we can use Livewire Action.