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