Hello Devs,
In this tutorial, we will learn Laravel Livewire Dependant Dropdown Example
In this example, we have two tables and there are listed below:
- demo_state
- demo_cities
Follow this step-by-step guide below.
Step 1 : Install Laravel App
run below command.
composer create-project --prefer-dist laravel/laravel blog
Step 2 : Setup Database Configuration
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=Enter_Your_Database_Name
DB_USERNAME=Enter_Your_Database_Username
DB_PASSWORD=Enter_Your_Database_Password
Step 3 : Create Migration and Model
fire below command:
php artisan make:migration create_state_city_tables
put below code in your migration file for create tables.
database/migrations/2021_01_01_073031_create_state_city_tables.php
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
class CreateStateCityTables extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('demo_state', function (Blueprint $table) {
$table->increments('id');
$table->string('name');
$table->timestamps();
});
Schema::create('demo_cities', function (Blueprint $table) {
$table->increments('id');
$table->integer('state_id');
$table->string('name');
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::drop('demo_cities');
Schema::drop('demo_state');
}
}
let's run below command one by one:
php artisan make:model DemoState
php artisan make:model DemoCity
app/Models/DemoState.php
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class DemoState extends Model
{
use HasFactory;
protected $table = 'demo_state';
protected $fillable = ['name'];
}
app/Models/DemoCity.php
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class DemoCity extends Model
{
use HasFactory;
protected $table = 'demo_cities';
protected $fillable = ['state_id', 'name'];
}
Step 4 : Install Livewire
composer require livewire/livewire
Step 5 : Create Component
php artisan make:livewire statecity
create files on both paths:
app/Http/Livewire/Statecity.php
resources/views/livewire/statecity.blade.php
app/Http/Livewire/Users.php
<?php
namespace App\Http\Livewire;
use Livewire\Component;
use App\Models\DemoCity;
use App\Models\DemoState;
class Statecity extends Component
{
public $states;
public $cities;
public $selectedState = NULL;
public function mount()
{
$this->states = DemoState::all();
$this->cities = collect();
}
public function render()
{
return view('livewire.statecity');
}
public function updatedSelectedState($state)
{
if (!is_null($state)) {
$this->cities = DemoCity::where('state_id', $state)->get();
}
}
}
Step 6 : Add Route
routes/web.php
Route::view('states-city','livewire.home');
Step 7 : Create View
resources/views/livewire/home.blade.php
<html>
<head>
<title>Laravel Livewire Dependant Dropdown - rathorji.in</title>
<script src="{{ asset('js/app.js') }}" defer></script>
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
@livewireStyles
</head>
<body>
<div class="container">
<div class="row justify-content-center mt-5">
<div class="col-md-8">
<div class="card">
<div class="card-header bg-dark text-white">
<h3>Laravel Livewire Dependant Dropdown - rathorji.in</h3>
</div>
<div class="card-body">
@livewire('statecity')
</div>
</div>
</div>
</div>
</div>
@livewireScripts
</body>
</html>
resources/views/livewire/statecity.blade.php
<div>
<div class="form-group row">
<label for="state" class="col-md-4 col-form-label text-md-right">State</label>
<div class="col-md-6">
<select wire:model="selectedState" class="form-control">
<option value="" selected>Choose state</option>
@foreach($states as $state)
<option value="{{ $state->id }}">{{ $state->name }}</option>
@endforeach
</select>
</div>
</div>
@if (!is_null($selectedState))
<div class="form-group row">
<label for="city" class="col-md-4 col-form-label text-md-right">City</label>
<div class="col-md-6">
<select class="form-control" name="city_id">
<option value="" selected>Choose city</option>
@foreach($cities as $city)
<option value="{{ $city->id }}">{{ $city->name }}</option>
@endforeach
</select>
</div>
</div>
@endif
</div>
run below command for quick run:
php artisan serve
open bellow URL on your browser:
http://localhost:8000/states-city
May this example help you.