Not Fetching default Select value from record on Edit

[meetwithchuks]

Laravel Version: 10.20.0 PHP Version: 8.2.12 Splade JS Version (npm): 1.4.16 Splade PHP Version (composer): 1.4.16

Description:

Blade form is not fetching/selecting the default value.

php artisan splade:show-versions

Steps To Reproduce Issue:

CourierController

<?php

namespace App\Http\Controllers;

use App\Http\Requests\StoreCourierRequest;
use App\Http\Requests\UpdateCourierRequest;
use App\Models\Courier;
use App\Models\VehicleType;
use App\Tables\Couriers;
use Illuminate\Support\Facades\Config;
use League\CommonMark\Extension\CommonMark\Node\Inline\Code;
use ProtoneMedia\Splade\Facades\Splade;
use ProtoneMedia\Splade\Facades\Toast;

class CourierController extends Controller
{
    /**
     * Display a listing of the resource.
     */
    public function index()
    {
        return view('admin/courier',[
            'couriers' => Couriers::class, 
        ]);
    }
    public function frontEnd()
    {
        $vehicle_types = VehicleType::select('name','name_fr','id')->get();
        $vehicle_type = VehicleType::get()->pluck('name','id');
        return view('components.signup_courier', compact('vehicle_types','vehicle_type'));
    }

    /**
     * Show the form for creating a new resource.
     */
    public function create()
    {
        $statuses = Config::get('general.statuses');  
        $vehicle_type = VehicleType::get()->pluck('name','id');
        return view('admin/courier_add',compact('vehicle_type','statuses'));

    }

    /**
     * Store a newly created resource in storage.
     */
    public function store(StoreCourierRequest $request)
    {   
        $courier = new Courier();
        $courier->firstname = $request->input('firstname');
        $courier->lastname = $request->input('lastname');
        $courier->email = $request->input('email');
        $courier->phone = $request->input('phone');
        $courier->vehicle_type_id = $request->input('vehicle_type');
        $courier->city = $request->input('city');
        $courier->message = $request->input('message');
        $courier->save();
        Toast::title('Courier created successfully!')->autoDismiss(10);
        return redirect(route('courier.index'));
    }
    public function storeFront(StoreCourierRequest $request)
    {   
        $courier = new Courier();
        $courier->firstname = $request->input('firstname');
        $courier->lastname = $request->input('lastname');
        $courier->email = $request->input('email');
        $courier->phone = $request->input('phone');
        $courier->vehicle_type_id = $request->input('vehicle_type');
        $courier->city = $request->input('city');
        $courier->message = $request->input('message');
        $courier->save();
        Splade::share('submitted_successful', 'Sent successful!');
    }

    /**
     * Display the specified resource.
     */
    public function show(Courier $courier)
    {
        //
    }

    /**
     * Show the form for editing the specified resource.
     */
    public function edit(Courier $courier)
    {        
        $statuses = Config::get('general.statuses');  
        $vehicle_types = VehicleType::get()->pluck('name','id');
        return view('admin/courier_edit',compact('courier','vehicle_types','statuses'));
    }

    /**
     * Update the specified resource in storage.
     */
    public function update(UpdateCourierRequest $request, Courier $courier)
    {
        $courier->firstname = $request->input('firstname');
        $courier->lastname = $request->input('lastname');
        $courier->email = $request->input('email');
        $courier->phone = $request->input('phone');
        $courier->vehicle_type_id = $request->input('vehicle_type');
        $courier->city = $request->input('city');
        $courier->message = $request->input('message');
        $courier->update();
        Toast::title('Courier updated successfully!')->autoDismiss(10);
        return redirect(route('courier.index'));
    }

    /**
     * Remove the specified resource from storage.
     */
    public function destroy(Courier $courier)
    {
        try {
        //todo: delete the post image
            // Attempt to delete the record
            $courier->delete();
        } catch (\Exception $exception) {
            Toast::title('Error Occured!'.$exception->getMessage())->danger()->autoDismiss(10);
        }
        Toast::title('Courier Deleted successfully!')->autoDismiss(10);
        return redirect('courier.index'));
    }
}

Blade:

<x-app-layout>
    <x-slot:header>
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
            {{ __('Edit Courier') }}
        </h2>
    </x-slot>

    <div class="py-10">
        <div class="max-w-full mx-auto sm:px-6 lg:px-8">
            <div class="min-h-screen bg-white overflow-hidden shadow-xl sm:rounded-lg p-10">
                <x-splade-modal>
                    <div class="mx-auto p-5">
                        <x-splade-form :default="$courier" class=" space-y-5" method="PATCH" action="{{ 'courier.update',$courier) }}" >
                            <h3 class="text-primary heading-3">{{ __('Edit Courier') }}</h3>
                            <div class="flex gap-10">
                                <div class="col-span-3 space-y-5">                                
                                    <x-splade-input name="firstname" label="{{ __('Firstname') }}"  required />                         
                                    <x-splade-input name="lastname" label="{{ __('Lastname') }}"  required />                     
                                    <x-splade-input type="email" name="email" label="{{ __('Email') }}"  required />          
                                    <x-splade-input type="phone" name="phone" label="{{ __('Phone') }}"  required />
                                    <x-splade-select name="vehicle_type" :options="$vehicle_types" label="{{ __('Vehicle Type') }}" choices /> 
                                    <x-splade-textarea name="message" label="{{ __('Message') }}" autosize />
                                </div>
                            </div>  
                            <div class="flex gap-5 justify-start items-center">                         
                                <x-splade-submit label="{{ __('Save') }}" />
                                <x-custom.link-outline2 class="border-red-200"  url="{{ 'courier.index') }}">{{ __('Cancel') }}</x-custom.link-outline2>
                                <p v-if="form.processing">Updating the data...</p>
                                <p v-if="form.wasSuccessful" class="text-green-700">Successfully Updated!</p>
                            </div>
                        </x-splade-form>
                    </div> 
                </x-splade-modal>               
            </div>
        </div>
    </div>
</x-app-layout>

[meetwithchuks]

My bad. I was supposed to add relation attribute to thex-splade-select. <x-splade-select name="vehicle_type" :options="$vehicle_types" label="{{ __('Vehicle Type') }}" relation choices />

The final blade file:

<x-app-layout>
    <x-slot:header>
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
            {{ __('Edit Courier') }}
        </h2>
    </x-slot>

    <div class="py-10">
        <div class="max-w-full mx-auto sm:px-6 lg:px-8">
            <div class="min-h-screen bg-white overflow-hidden shadow-xl sm:rounded-lg p-10">
                <x-splade-modal>
                    <div class="mx-auto p-5">
                        <x-splade-form :default="$courier" class=" space-y-5" method="PATCH" action="{{ 'courier.update',$courier) }}" >
                            <h3 class="text-primary heading-3">{{ __('Edit Courier') }}</h3>
                            <div class="flex gap-10">
                                <div class="col-span-3 space-y-5">                                
                                    <x-splade-input name="firstname" label="{{ __('Firstname') }}"  required />                         
                                    <x-splade-input name="lastname" label="{{ __('Lastname') }}"  required />                     
                                    <x-splade-input type="email" name="email" label="{{ __('Email') }}"  required />          
                                    <x-splade-input type="phone" name="phone" label="{{ __('Phone') }}"  required />
                                    <x-splade-select name="vehicle_type" :options="$vehicle_types" label="{{ __('Vehicle Type') }}" relation choices /> 
                                    <x-splade-textarea name="message" label="{{ __('Message') }}" autosize />
                                </div>
                            </div>  
                            <div class="flex gap-5 justify-start items-center">                         
                                <x-splade-submit label="{{ __('Save') }}" />
                                <x-custom.link-outline2 class="border-red-200"  url="{{ 'courier.index') }}">{{ __('Cancel') }}</x-custom.link-outline2>
                                <p v-if="form.processing">Updating the data...</p>
                                <p v-if="form.wasSuccessful" class="text-green-700">Successfully Updated!</p>
                            </div>
                        </x-splade-form>
                    </div> 
                </x-splade-modal>               
            </div>
        </div>
    </div>
</x-app-layout>