Sekarang, mari kita lihat contoh dropdown laravel livewire dependent. Artikel ini akan memberi Anda contoh sederhana dari dropdown laravel livewire state city. Tutorial ini akan memberi Anda contoh sederhana bagaimana menambahkan daftar drop-down dependen di laravel livewire. langkah demi langkah menjelaskan dropdown tergantung livewire di laravel. Mari kita lihat contoh di bawah dropdown livewire laravel dependent.

Dalam tutorial ini, kita akan membuat contoh dropdown bergantung kota dan negara bagian menggunakan laravel livewire. Anda dapat menggunakan dengan mudah menambahkan versi dropdown laravel 6, laravel 7 dan laravel 8 yang bergantung pada livewire.

Jadi, mari ikuti langkah berikut dan Anda akan mendapatkan tata letak di bawah ini:

Langkah 1: Instal Laravel 8

pertama-tama kita perlu mendapatkan aplikasi Laravel 8 versi baru menggunakan perintah di bawah ini, Jadi buka terminal atau command prompt Anda dan jalankan perintah di bawah ini:

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

Langkah 2: Buat Migrasi dan Model

Pada langkah ini, kita perlu membuat tabel cities dan states dengan model. jadi mari buat seperti di bawah ini:

php artisan make:migration create_states_cities_tables

database/migrations/2021_02_02_143326_create_states_cities_tables.php

<?php

  
use Illuminate\Database\Migrations\Migration;

use Illuminate\Database\Schema\Blueprint;

use Illuminate\Support\Facades\Schema;

  
class CreateStatesCitiesTables extends Migration

{

    /**

     * Run the migrations.

     *

     * @return void

     */

    public function up()

    {

        Schema::create('states', function (Blueprint $table) {Schema::create('states', function (Blueprint $table) {
            $table->id();->id();
            $table->string('name');->string('name');
            $table->timestamps();->timestamps();
        });});
  
        Schema::create('cities', function (Blueprint $table) {Schema::create('cities', function (Blueprint $table) {
            $table->id();->id();
            $table->integer('state_id');->integer('state_id');
            $table->string('name');->string('name');
            $table->timestamps();->timestamps();
        });});
    }}
    /**/**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()public function down()
    {{
        Schema::dropIfExists('states');Schema::dropIfExists('states');
        Schema::dropIfExists('cities');Schema::dropIfExists('cities');
    }}
}

sekarang mari buat model dengan menggunakan perintah di bawah ini:

php artisan make:model State
php artisan make:model City

app/Models/State.php

<?php
  
namespace App\Models;
  
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
  
class State extends Model
{
    use HasFactory;
  
    protected $fillable = ['name'];
}

app/Models/City.php

<?php
  
namespace App\Models;
  
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
  
class City extends Model
{
    use HasFactory;
  
    protected $fillable = ['state_id', 'name'];
}

Langkah 3: Instal Livewire

Sekarang di langkah ini, kita hanya akan menginstal livewire ke aplikasi laravel 8 kita menggunakan perintah di bawah ini:

composer require livewire/livewire

Langkah 4: Buat Komponen

Sekarang di sini kita akan membuat komponen livewire menggunakan perintah mereka. Jadi jalankan perintah di bawah ini untuk membuat komponen statecitydropdown.

php artisan make:livewire statecitydropdown

Sekarang mereka membuat fies di kedua jalur:

app/Http/Livewire/Statecitydropdown.php

resources/views/livewire/statecitydropdown.blade.php

Sekarang kedua file akan kami perbarui seperti di bawah untuk formulir.

app/Http/Livewire/Statecitydropdown.php

<?php
  
namespace App\Http\Livewire;
  
use Livewire\Component;
use App\Models\City;
use App\Models\State;
  
class Statecitydropdown extends Component
{
    public $states;
    public $cities;
  
    public $selectedState = NULL;
  
    /**
     * Write code on Method
     *
     * @return response()
     */
    public function mount()
    {
        $this->states = State::all();
        $this->cities = collect();
    }
  
    /**
     * Write code on Method
     *
     * @return response()
     */
    public function render()
    {
        return view('livewire.statecitydropdown')->extends('layouts.app');
    }
  
    /**
     * Write code on Method
     *
     * @return response()
     */
    public function updatedSelectedState($state)
    {
        if (!is_null($state)) {
            $this->cities = City::where('state_id', $state)->get();
        }
    }
    
}

resources/views/livewire/statecitydropdown.blade.php

<div>
    <h1>Laravel Livewire Dependant Dropdown - Medikre.com</h1>
    <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>

Langkah 5: Buat Route

sekarang kita akan membuat satu route untuk memanggil contoh kita, jadi mari tambahkan route baru ke file web.php seperti di bawah ini:

routes/web.php

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

Langkah 6: Buat File View

Di sini, kita akan membuat file blade untuk route formulir. di file ini kita akan menggunakan @livewireStyles, @livewireScripts. jadi mari tambahkan.

resources/views/layouts/app.blade.php

<!DOCTYPE html>
<html>
<head>
    <title>Laravel Livewire Example - Medikre.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>

Sekarang Anda dapat menjalankan menggunakan perintah di bawah ini:

php artisan serve

Buka URL di bawah:

localhost:8000/statecitydropdown

Saya harap ini dapat membantu Anda...