Actions in livewire

 Most of the time we use event in the javascript like click, double click, mouse up, down etc. In livewire we use/ fire these events on certain Action. These on any action accure there event which to this action and do some operation, rerender etc.

To fire / intiate action we need to write on the button or where you want to use the action.

<div>

    <button wire:click="connect" class="btn btn-primary btn-md">Connect Button</button>

</div>

And inside livewire Controller Class define a method named "connect"

public function connect() {

    dd('connected');

} 

All Browser Events list Click the link below

https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_key_values

Most usable events in livewire

<div>

    <h1 class="h2">Actions in Livewire</h1>

        <button wire:click="connect"

        class="btn btn-primary btn-md my-2 mx-2">Click Event Button</button>

        <button wire:keydown.enter="connect"

        class="btn btn-primary btn-md my-2 mx-2">(Keydown + Enter btn) Event Button</button>

        <button wire:keydown.arrow-up="connect"

        class="btn btn-primary btn-md my-2 mx-2">(Keydown + arrow-up) Event Button</button>

        <button wire:keydown.caps-lock="connect"

        class="btn btn-primary btn-md my-2 mx-2">(Keydown + CapsLock) Event Button</button>

    <h2>Pass parameters to method</h2>

    My Store Name: <strong>{{$storeName}}</strong>

        <button wire:click="connectMe('adnan','zaib')"

        class="btn btn-primary btn-md my-2 mx-2">Click Event Button</button>

    <h3>Rerender(Refresh) the component with click</h3>

        <button wire:click="$refresh"

        class="btn btn-primary btn-md my-2 mx-2">Refresh Component Button</button>

    <h3>Direct bind with property using $set() method</h3>

    <p>Dinding without calling/using method!</p>

        <button wire:click="$set('storeName','Madina Store')"

        class="btn btn-primary btn-md my-2 mx-2">Direct Bind Button</button>

    <h3>If you want to use boolean event (True/False)</h3>

    <p>Use $toggle()</p>

    Store is <strong>{{$isOpen? 'Open Now' : 'Closed Now'}}</strong>

        <button wire:click="$toggle('isOpen')"

        class="btn btn-primary btn-md my-2 mx-2">Toggle Button</button>

    <h3>Emit Browser Event</h3>

        <button wire:click="$emit('openStore')"

        class="btn btn-primary btn-md my-2 mx-2">Emit Event</button>

</div>