How Laravel Livewire Click Event work?

Share Me
  •  
  •  
  •  
  • 1
  •  
  •  
  •  
  •  
  •  
  •  
  •  
    1
    Share

Hello Dev’s,
Today, i will show you laravel livewire click event example. So now i will explaine very simply step by step laravel livewire wire:click example. So this article  will go in detailed about laravel livewire click not working. i will like to share with you laravel livewire click event.

Here, i will give you a very simple example of click event in laravel livewire. So i  will take two buttons and call two functions of livewire class. One will be simple and another one will be with argument. So i can do easily click event with laravel 6, laravel 7 and laravel 8 version.

Step 1: Install Laravel

At first of all we need to a fresh Laravel version application by using bellow command. So open your terminal OR command prompt and run bellow command:

composer create-project –prefer-dist laravel/laravel blog

Step 2: Install Livewire

So now in this step, i will simply install livewire to my laravel application using bellow command:

composer require livewire/livewire

Read Also : Get Checked Radio Button Value in Vue JS

Step 3: Create Component

Now here i will create livewire component using their command. So run bellow command to create clickEvent component.

php artisan make:livewire clickEvent

Now they created fies on both path:

app/Http/Livewire/ClickEvent.php

resources/views/livewire/click-event.blade.php

Now both file we will update as bellow for our contact us form.

app/Http/Livewire/ClickEvent.php

<?php
  
namespace App\Http\Livewire;
  
use Livewire\Component;
  
class ClickEvent extends Component
{
    public $message = '';
    public $user_id = 42;
  
    /**
     * Write code on Method
     *
     * @return response()
     */
    public function render()
    {
        return view('livewire.click-event')->extends('layouts.app');
    }
  
    /**
     * Write code on Method
     *
     * @return response()
     */
    public function callFunction()
    {
        $this->message = "You clicked on button";
    }
  
    /**
     * Write code on Method
     *
     * @return response()
     */
    public function callFunctionArg($user_id)
    {
        $this->message = $user_id;
    }
}
resources/views/livewire/click-event.blade.php
<div>
    <button type="button" wire:click="callFunction" class="btn btn-danger">Click Me</button>
    <button type="button" wire:click="callFunctionArg({{$user_id}})" class="btn btn-danger">Click Me!</button>
      
    <p>{{ $message }}</p>
</div>

Step 4: Create Route

now we will create one route for calling our example, so let’s add new route to web.php file as bellow:

routes/web.php

<?php
  
use Illuminate\Support\Facades\Route;
 
use App\Http\Livewire\ClickEvent;
  
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
  
Route::get('click-event', ClickEvent::class);

Step 5: Create View File

here, i will create blade file for call form route. In this file i will use @livewireStyles, @livewireScripts. So let’s add it.

resources/views/layouts/app.blade.php

<!DOCTYPE html>
<html>
<head>
    <title>Laravel Livewire Example - Codings Point</title>
    @livewireStyles
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
    <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
</head>
<body>
    
<div class="container">
    @yield('content')
</div>
    
</body>
  
@livewireScripts
</html>

Now i can run using bellow command:

php artisan serve

Open bellow URL:

localhost:8000/click-event

I hope it can help you… Also you can follow us on Facebook

About code chef

My name is Shahriar sagor. I'm a developer. I live in Bangladesh and I love to write tutorials and tips that will help to other Developer's. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.

View all posts by code chef →