Laravel Livewire Change Event Example

In this tutorial, we will demonstrate the Laravel livewire change event example. Here, we will take a very simple example of a change event in Laravel livewire. We will take the city dropdown and on change, and then select city id. You can do these changes with Laravel 6, Laravel 7, Laravel 8, and Laravel 9 versions.

So, let’s follow the below steps:

Step 1: Install Laravel

We will install the fresh Laravel version application using the below command, Open the terminal OR command prompt and run the below command:

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

Step 2: Install Livewire

Now, install livewire to the Laravel application using the below command:

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

Step 3: Create Component

Now, create the livewire component using their command. Run the below command to create the changeEvent component.

php artisan make:livewire changeEvent

Now, create files on both paths:

app/Http/Livewire/ChangeEvent.php

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

Now, update both files as below for the contact us form.

app/Http/Livewire/ChangeEvent.php

<?php
  
namespace App\Http\Livewire;
  
use Livewire\Component;
   
class ChangeEvent extends Component
{
    public $cities = [
        1 => 'Rajkot',
        2 => 'Surat',
        3 => 'Vadodara'
    ];
    public $city_id = '';
  
    /**
     * Write code on Method
     *
     * @return response()
     */
    public function render()
    {
        return view('livewire.change-event')->extends('layouts.app');
    }
  
    /**
     * Write code on Method
     *
     * @return response()
     */
    public function changeEvent($value)
    {
        $this->city_id = $value;
    }
}
resources/views/livewire/change-event.blade.php

<div>
    <h1>Laravel Livewire Change Event Example - ItSolutionStuff.com</h1>
    <div>
        <strong>Select City:</strong>
        <select class="form-control" wire:click="changeEvent($event.target.value)">
            <option value="">-- Select City --</option>
            @foreach($cities as $key => $city)
                <option value="{{ $key }}">{{ $city }}</option>
            @endforeach
        </select>
  
        <p>Selected City ID: {{ $city_id }}</p>
    </div>
</div>

Step 4: Create Route

Create one route for calling our example, and add new route to the web.php file as below:

routes/web.php

<?php
  
use Illuminate\Support\Facades\Route;
 
use App\Http\Livewire\ChangeEvent;
  
/*
|--------------------------------------------------------------------------
| 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('change-event', ChangeEvent::class);

Step 5: Create View File

In this step, we will be creating the blade file for the call form route. Use @livewireStyles, @livewireScripts in this file.

resources/views/layouts/app.blade.php

<!DOCTYPE html>
<html>
<head>
    <title>Laravel Livewire Example</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, run using the below command:

php artisan serve

 


Notice: ob_end_flush(): failed to send buffer of zlib output compression (1) in /home/u212091429/domains/mydevhelp.com/public_html/wp-includes/functions.php on line 5420

Notice: ob_end_flush(): failed to send buffer of zlib output compression (1) in /home/u212091429/domains/mydevhelp.com/public_html/wp-includes/functions.php on line 5420