Laravel Livewire Change Event Example

In this example we learn laravel livewire change event. Also learn how to use change event in laravel livewire, example of laravel livewire change event. we over the demonstration of laravel livewire change event example.

In this post i explain step by step to livewire change event example in laravel. Livewire on change event example.

Laravel Livewire Change Event

Step 1: Install Laravel

In this step i install fresh laravel version application for use livewire change event using the following command.

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

Step 2: Install Livewire

In this step i install laravel livewire in our laravel application following command.

composer require livewire/livewire

Step 3: Create Component

Now in this step i create livewire component using the following command. So first run bellow command to create changeEvent component in your laravel application.

php artisan make:livewire changeEvent

This command create two file :

app/Http/Livewire/ChangeEvent.php
resources/views/livewire/change-event.blade.php

app/Http/Livewire/ChangeEvent.php

<?php
  
namespace App\Http\Livewire;
  
use Livewire\Component;
   
class ChangeEvent extends Component
{
    public $cities = [
        1 => 'Surat',
        2 => 'Amreli',
        3 => 'Ahmedabad'
    ];
    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 - Web-tuts.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

Now step we will create one route for calling our example, so add new route to web.php file as bellow:

Read Also :  Laravel 8 QR Code Generate Example

routes/web.php

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

Step 5: Create View File

In this step 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/change-event