Laravel Livewire Click Event Example

In this post we learn laravel livewire click event example. I explained simply step by step to  laravel livewire wire:click example. This article goes in detailed on laravel livewire click not working. iIwould like to share with you laravel livewire click.

Laravel Livewire Click Event Example

Step 1: Install Laravel

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

Step 2: Install Livewire

composer require livewire/livewire

Step 3: Create Component

php artisan make:livewire clickEvent

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

<?php
  
use Illuminate\Support\Facades\Route;
 
use App\Http\Livewire\ClickEvent;
  
  
Route::get('click-event', ClickEvent::class);

Step 5: Create View File

Read Also :  Laravel Where Not in Eloquent Example

here, we will create blade file for call form route. in this file we will use @livewireStyles, @livewireScripts. so let’s add it.

resources/views/layouts/app.blade.php

<!DOCTYPE html>
<html>
<head>
    <title>Laravel Livewire Example - web-tuts.com</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 you can run using bellow command:

php artisan serve

Open bellow URL:

localhost:8000/click-event