Laravel Livewire：动态下拉列表无法保存到数据库中

Question

I'm currently developing a website using laravel livewire, and i'm trying to create a dynamic dropdown on create form page. The problem that i having is that, when the form is filled, and when the submit button is clicked, it won't store the data, it just stuck on the page. How do i fix this problem??

The livewire model :

<?php

namespace App\Http\Livewire;

use Livewire\Component;
use App\Models\Kredit;
use App\Models\Biaya;
use App\Models\Produk;
use App\Models\Promo;
use App\Models\Motorcycle;
use App\Models\MotorcycleBrand;
use App\Models\Domisili;

class KreditMulti extends Component
{
    public $biaya_id;
    public $produk_id;
    public $promo_id;
    public $motorcycle_id;
    public $motorcycle_brand_id;
    public $domisili_id;
    public $kredit_nik;
    public $kredit_name;
    public $kredit_phone;
    public $kredit_phone2;
    public $kredit_vehicle;
    public $kredit_plan;
    public $kredit_desc;

    public $brand_id;

    public $totalSteps = 2;
    public $currentStep = 1;

    public function mount()
    {
        $this->currentStep = 1;
    }

    public function render()
    {
        $domisilis = Domisili::all();
        $motorcycles = Motorcycle::all();
        $motorcycle_brands = MotorcycleBrand::all();

        //for the dynamic dropdown
        if($this->brand_id){
            $motorcycle_brands = MotorcycleBrand::where('motorcycle_id', $this->brand_id)->get();
        } else {
            $motorcycle_brands = [];
        }

        return view('livewire.kredit-multi',
        ['domisilis'=>$domisilis, 'motorcycles'=>$motorcycles, 'motorcycle_brands'=>$motorcycle_brands])
                ->withMotorcycles(Motorcycle::all())
                ->with('motorcycle_brands', $motorcycle_brands);
    }

    public function increaseStep(){
        $this->resetErrorBag();
        $this->validateData();
        $this->currentStep++;
        if($this->currentStep > $this->totalSteps){
            $this->currentStep = $this->$totalSteps;
        }
    }

    public function decreaseStep(){
        $this->resetErrorBag();
        $this->currentStep--;
        if($this->currentStep < 1){
            $this->currentStep = 1;
        }
    }

    public function validateData(){
        if($this->currentStep == 1){
            $this->validate([
                'biaya_id'=>'required',
                'promo_id'=>'required',
                'domisili_id'=>'required',
                'kredit_nik'=>'required|numeric|digits:16',
                'kredit_name'=>'required',
                'kredit_phone'=>'required|numeric|digits_between:10,15',
                'kredit_phone2'=>'nullable|numeric|digits_between:10,15'
            ]);
        }
    }

    public function createkredit(){
        if($this->currentStep == 2){
            $this->validate([
                'produk_id'=>'required',
                'motorcycle_id'=>'required',
                'motorcycle_brand_id'=>'required',
                'kredit_vehicle'=>'required',
                'kredit_plan'=>'required|numeric',
                'kredit_desc'=>'nullable'
            ]);
        }

        $values = array(
            "biaya_id" => $this->biaya_id,
            "produk_id"=> $this->produk_id,
            "promo_id"=> $this->promo_id,
            "motorcycle_id"=> $this->motorcycle_id,
            "motorcycle_brand_id"=>$this->motorcycle_brand_id,
            "domisili_id"=> $this->domisili_id,
            "kredit_nik"=> $this->kredit_nik,
            "kredit_name"=> $this->kredit_name,
            "kredit_phone"=> $this->kredit_phone,
            "kredit_phone2"=> $this->kredit_phone2,
            "kredit_vehicle"=> $this->kredit_vehicle,
            "kredit_plan"=> $this->kredit_plan,
            "kredit_desc"=> $this->kredit_desc,
            "brand_id"=> $this->brand_id
        );

        Kredit::insert($values);
        $this->reset();
        $this->currentStep = 1;

        return redirect()->to('/kredit');
    }
}

Livewire blade php :

<form wire:submit.prevent="createkredit">
        {{--Step 1,3152021502002002--}}
        @if ($currentStep == 1)
        <div class="form-group">
            <label>NIK</label>
            <input type="text" required class="form-control @error('kredit_nik') is-invalid @enderror" id="kredit_nik" name="kredit_nik" class="form-control" autocomplete="off" placeholder="Contoh : 3152021502002002" wire:model="kredit_nik">
        </div>
        @error('kredit_nik') 
            <div class="alert alert-danger">{{ $message }}</div>
        @enderror
        <br>
        <div class="form-group">
            <label>Nama Lengkap</label>
            <input type="text" required class="form-control @error('kredit_name') is-invalid @enderror" id="kredit_name" name="kredit_name" class="form-control" autocomplete="off" placeholder="Contoh : Nathanael Budiman" wire:model="kredit_name">
        </div>
        @error('kredit_name') 
            <div class="alert alert-danger">{{ $message }}</div>
        @enderror
        <br>
        <div class="form-group">
            <label>Nomor Telepon 1</label>
            <input type="text" required class="form-control @error('kredit_phone') is-invalid @enderror" id="kredit_phone" name="kredit_phone" class="form-control" autocomplete="off" placeholder="Contoh : 0813 8776 5887" wire:model="kredit_phone">
        </div>
        @error('kredit_phone') 
            <div class="alert alert-danger">{{ $message }}</div>
        @enderror
        <br>
        <div class="form-group">
            <label>Nomor Telepon 2 (Optional)</label>
            <input type="text" class="form-control @error('kredit_phone2') is-invalid @enderror" id="kredit_phone2" name="kredit_phone2" class="form-control"autocomplete="off" placeholder="Contoh : 0813 8776 5887" wire:model="kredit_phone2">
        </div>
        @error('kredit_phone2') 
            <div class="alert alert-danger">{{ $message }}</div>
        @enderror
        <br>
        <div class="form-group">
            <label>Kota Domisili</label>
            <input type="text" required class="form-control @error('domisili_id') is-invalid @enderror" list="domisiliList" id="domisili_id" name="domisili_id" class="form-control" autocomplete="off" placeholder="Contoh : Jakarta Pusat" wire:model="domisili_id">
            <datalist id="domisiliList" name="domisili_id">
                @foreach ($domisilis as $domisili)
                    <option value="{{$domisili->domisili_name}}">{{$domisili->domisili_name}}</option>
                @endforeach
            </datalist>
        </div>
        @error('domisili_id') 
            <div class="alert alert-danger">{{ $message }}</div>
        @enderror
        <br>
        <div class="form-group">
            <label for="biaya_id">Jenis Pembiayaan</label>
            <select class="form-control" name="biaya_id" id="biaya_id" wire:model="biaya_id">
                <option value="">--</option>
                <option value="1">Konvensional</option>
            </select>
        </div>
        @error ('biaya_id')
            <div class="alert alert-danger">{{ $message }}</div>                                    
        @enderror
        <br>
        <div class="form-group">
            <label for="promo_id">Mengetahui Informasi Promo Dari</label>
            <select class="form-control" name="promo_id" id="promo_id" wire:model="promo_id">
                <option value="">--</option>
                <option value="1">Media Sosial</option>
                <option value="2">Website</option>
                <option value="3">Keluarga/Teman</option>
                <option value="4">SMS</option>
                <option value="5">Lainnya</option>
            </select>
        </div>
        @error ('promo_id')
            <div class="alert alert-danger">{{ $message }}</div>                                    
        @enderror
        <br>
        @endif

        {{--Step 2--}}
        @if ($currentStep == 2)
            
        <div class="form-group">
            <label for="produk">Jenis Produk</label>
            <select class="form-control" name="produk_id" id="produk_id" wire:model="produk_id">
                <option value="">--</option>
                <option value="1">Motor Baru</option>
                <option value="2">Motor Bekas</option>
            </select>
        </div>
        @error ('produk_id')
            <div class="alert alert-danger">{{ $message }}</div>                                    
        @enderror
        <br>

        <!--Begin for the dynamic dropdown-->
        <div class="form-group row">
            <label for="motorcycle" class="col-md-4">Merek motor</label>
            <div class="col-md-6">
                <select wire:model="brand_id" class="form-control">
                    <option value="" selected >Choose Motor</option>
                    @foreach ($motorcycles as $m)
                        <option value="{{$m->id}}" wire:key="motorcycle{{$m->id}}">{{$m->motorcycle_name}}</option>
                    @endforeach
                </select>
            </div>
        </div>
        <br>
        @if (count($motorcycle_brands) > 0)
            <div class="form-group row">
                <label for="motorcycle_brand" class="col-md-4 col-form-label text-md-right">Jenis Motor</label>
                <div class="col-md-6">
                    <select class="form-control" name="motorcycle_brand_id">
                        <option value="" selected>Choose the motor version</option>
                        @foreach ($motorcycle_brands as $motor)
                            <option value="{{$motor->id}}" wire:key="motorcycle_brand{{$motor->id}}">{{$motor->motorcycle_brand_name}}</option>
                        @endforeach
                    </select>
                </div>
            </div>
        @endif
        <br>
        <!--End for the dynamic dropdown-->

        <div class="form-group">
            <label>Tahun Kendaraan</label>
            <input type="text" required class="form-control @error('kredit_vehicle') is-invalid @enderror" id="kredit_vehicle" name="kredit_vehicle" class="form-control" autocomplete="off" placeholder="Contoh : 2005" wire:model="kredit_vehicle">
        </div>
        @error('kredit_vehicle') 
            <div class="alert alert-danger">{{ $message }}</div>
        @enderror
        <br>
        <div class="form-group">
            <label>Rencana Pinjaman</label>
            <input type="text" required class="form-control @error('kredit_plan') is-invalid @enderror" id="kredit_plan" name="kredit_plan" class="form-control" autocomplete="off" placeholder="Contoh : 2,000,000" wire:model="kredit_plan">
        </div>
        @error('kredit_plan') 
            <div class="alert alert-danger">{{ $message }}</div>
        @enderror
        <br>
        <div class="form-group">
            <label>Keterangan</label><br>
            <textarea name="kredit_desc" id="kredit_desc" cols="79" rows="1" autocomplete="off" placeholder="Contoh : Motor Revo" wire:model="kredit_desc"></textarea>
        <!--    <input type="text" id="kredit_vehicle" name="kredit_vehicle" class="form-control" placeholder="Contoh : Honda">-->
        </div>
        @endif

        <div class="action-buttons d-flex justify-content-between bg-white pt-2 pb-2">

            @if ($currentStep == 1)
                <div></div>
            @endif

            @if ($currentStep == 2)
                <button type="button" class="btn btn-info btn_secondary" id="btn_secondary" 
                style="background-color: #ffc107; border:none; color:black" wire:click="decreaseStep()">Previous</button>
            @endif

            @if ($currentStep == 1)
                <button type="button" class="btn btn-info btn_next" id="btn_next" 
                style="background-color: #ffc107; border:none; color:black" wire:click="increaseStep()">Next</button>                
            @endif

            @if ($currentStep == 2)
                <div>
                    <button type="submit" class="btn btn-info" id="btn_submit" 
                    style="background-color: #ffc107; border:none; color:black">Ajukan Kredit</button>                
                </div>    
            @endif

        </div>
    </form>

The createkredit method livewire :

public function createkredit(){
        if($this->currentStep == 2){
            $this->validate([
                'produk_id'=>'required',
                'motorcycle_id'=>'required',
                'motorcycle_brand_id'=>'required',
                'kredit_vehicle'=>'required',
                'kredit_plan'=>'required|numeric',
                'kredit_desc'=>'nullable'
            ]);
        }

        $values = array(
            "biaya_id" => $this->biaya_id,
            "produk_id"=> $this->produk_id,
            "promo_id"=> $this->promo_id,
            "motorcycle_id"=> $this->motorcycle_id,
            "motorcycle_brand_id"=>$this->motorcycle_brand_id,
            "domisili_id"=> $this->domisili_id,
            "kredit_nik"=> $this->kredit_nik,
            "kredit_name"=> $this->kredit_name,
            "kredit_phone"=> $this->kredit_phone,
            "kredit_phone2"=> $this->kredit_phone2,
            "kredit_vehicle"=> $this->kredit_vehicle,
            "kredit_plan"=> $this->kredit_plan,
            "kredit_desc"=> $this->kredit_desc
        );

        Kredit::insert($values);
        $this->reset();
        $this->currentStep = 1;

        return redirect()->to('/kredit');
    }

Answer 1

I'm not sure what is going on with your code. At a quick glance if everything else is working I would suggest that your problem lies here:

$values = array(
    "biaya_id" => $this->biaya_id,
    "produk_id"=> $this->produk_id,
    "promo_id"=> $this->promo_id,
    "motorcycle_id"=> $this->motorcycle_id,
    "motorcycle_brand_id"=>$this->motorcycle_brand_id,
    "domisili_id"=> $this->domisili_id,
    "kredit_nik"=> $this->kredit_nik,
    "kredit_name"=> $this->kredit_name,
    "kredit_phone"=> $this->kredit_phone,
    "kredit_phone2"=> $this->kredit_phone2,
    "kredit_vehicle"=> $this->kredit_vehicle,
    "kredit_plan"=> $this->kredit_plan,
    "kredit_desc"=> $this->kredit_desc,
    "brand_id"=> $this->brand_id
);

Kredit::insert($values);

Try changing it to:

Kredit::create([
    "biaya_id" => $this->biaya_id,
    "produk_id"=> $this->produk_id,
    "promo_id"=> $this->promo_id,
    "motorcycle_id"=> $this->motorcycle_id,
    "motorcycle_brand_id"=>$this->motorcycle_brand_id,
    "domisili_id"=> $this->domisili_id,
    "kredit_nik"=> $this->kredit_nik,
    "kredit_name"=> $this->kredit_name,
    "kredit_phone"=> $this->kredit_phone,
    "kredit_phone2"=> $this->kredit_phone2,
    "kredit_vehicle"=> $this->kredit_vehicle,
    "kredit_plan"=> $this->kredit_plan,
    "kredit_desc"=> $this->kredit_desc,
    "brand_id"=> $this->brand_id
]);

If this isn't the case I have created a small example to show you what I think your asking:

This example has 3 tables, you will need to create models for each of these:

CREATE TABLE `brands` (
  `id` bigint unsigned NOT NULL AUTO_INCREMENT,
  `name` varchar(255) COLLATE utf8mb4_unicode_ci NOT NULL,
  `created_at` timestamp NULL DEFAULT NULL,
  `updated_at` timestamp NULL DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=4 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci

CREATE TABLE `products` (
  `id` bigint unsigned NOT NULL AUTO_INCREMENT,
  `brand_id` bigint unsigned NOT NULL,
  `name` varchar(255) COLLATE utf8mb4_unicode_ci NOT NULL,
  `created_at` timestamp NULL DEFAULT NULL,
  `updated_at` timestamp NULL DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=6 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci

CREATE TABLE `orders` (
  `id` bigint unsigned NOT NULL AUTO_INCREMENT,
  `brand_id` bigint unsigned NOT NULL,
  `product_id` bigint unsigned NOT NULL,
  `created_at` timestamp NULL DEFAULT NULL,
  `updated_at` timestamp NULL DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=3 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci

add the following relationship to your Brand.php Model:-

public function products()
{
    return $this->hasMany(Product::class);
}

and ensure that brand_id and product_id can be mass assigned in your Order.php model:

protected $fillable = [
    'brand_id', 
    'product_id'
];

Livewire Component:-

<?php

namespace App\Http\Livewire;

use App\Models\Brand;
use App\Models\Order;
use App\Models\Product;
use Livewire\Component;

class DynamicDropdown extends Component
{
    public $selectedBrand;
    public $selectedProduct;

    public function createOrder()
    {
        Order::create([
            'brand_id' => $this->selectedBrand,
            'product_id' => $this->selectedProduct,
        ]);

        return redirect()->route('home');
    }

    public function render()
    {
        $products = Product::where('brand_id', $this->selectedBrand)->get();

        return view('livewire.dynamic-dropdown', [
            'brands' => Brand::get(),
            'products' => $products
        ]);
    }
}

Livewire View:

<div>
    <label for="brands">Brands</label>
    <select wire:model="selectedBrand">
            <option selected>Choose a brand...</option>
        @foreach ($brands as $brand)
            <option value="{{ $brand->id }}">{{ $brand->name }}</option>
        @endforeach
    </select>

    @if ($products)
        <label for="products">Products</label>
        <select wire:model="selectedProduct">
            <option selected>Choose a product...</option>
            @foreach ($products as $product)
                <option value="{{ $product->id }}">{{ $product->name }}</option>
            @endforeach
        </select>
    @endif

    <button type="submit" wire:click="createOrder()">Submit</button>
</div>

which is called with <livewire:dynamic-dropdown />

This is a simple example of a dynamic dropdown and is not a complete solution, validation etc will till need to be carried out. When a brand is selected the products associated to that brand will appear in the second dropdown, when the button is clicked the brand_id and product_id will be submitted and entered into the orders table.