How to bind selected model instance (case editing model instance)

[heru]

hi all,

I have a model that have foreign id. I was able to create a model instance with foreign id value By using livewire-select. But when editing a model instance, my selected foreign model class can't displayed at form edit

here is my model class:

class MasterBarang extends Model
{
      use HasFactory;
      use UserRelationship;
  
      protected $table = 'master_barang';
      protected $fillable = ['mtgkey', 'kode_perkiraan', 'nama_perkiraan', 'level', 'kode_khusus', 'tipe', 'satuan', 'created_user_id', 'updated_user_id'];
}

class SaldoAwal extends Model
{
    use HasFactory;
    protected $table = 'saldo_awal';
    protected $fillable = [
        'unit_key',
        'nomor_bapnb',
        'nomor_spk',
        'tanggal',
        'kode_gudang',
        'kode_transaksi',
        'tanggal_verifikasi',
        'created_user_id',
        'updated_user_id'
    ];

    public function items()
    {
        return $this->hasMany(SaldoAwalItem::class);
    }
}

class SaldoAwalItem extends Model
{
      use HasFactory;
      protected $table = 'saldo_awal_item';
      protected $fillable = [
          'saldo_awal_id',
          'unit_key',
          'nomor_bapnb',
          'master_barang_id',
          'jumlah',
          'harga',
          'total_harga',
          'id_satuan',
          'merek',
          'verified',
          'created_user_id',
          'updated_user_id'
      ];
  
      public function master_barang()
      {
          return $this->belongsTo(MasterBarang::class);
      }
}

here my livewire-select class

class MasterBarangSelect extends LivewireSelect
{
    public function options($searchTerm = null): Collection
    {
        if (null != $searchTerm) {
            return MasterBarang::where('nama_perkiraan', 'like', '%' . $searchTerm . '%')
                ->take(10)
                ->get(['id', 'nama_perkiraan'])->mapWithKeys(function ($item, $key) {
                    return [$key => [
                        'value' => $item->id,
                        'description' => $item->nama_perkiraan
                    ]];
                });
        }
        return MasterBarang::latest()
            ->take(10)
            ->get(['id', 'nama_perkiraan'])
            ->mapWithKeys(function ($item, $key) {
                return [$key => [
                    'value' => $item->id,
                    'description' => $item->nama_perkiraan
                ]];
            });
    }

    public function selectedOption($value)
    {
        $master_barang = MasterBarang::find($value);
        return [
            'value' => $master_barang->id,
            'description' => $master_barang->nama_perkiraan
        ];
    }
}

here is my livewire class

class SaldoAwalDetail extends Component
{
    public $saldo_awal;

    public $master_barang_id;
    public $jumlah;
    public $harga;
    public $id_satuan;
    public $merek;
    public $showCreateSaldoAwalItemForm;


    public $saldoAwalItemBeingEdit;
    public $saldoAwalItemIdBeingEdit;
    public $showEditSaldoAwalItemForm;
    public $masterBarangIdEdit;

    protected $listeners = ['master_barang_idUpdated', 'master_barang_edit_idUpdated'];

    // capture master_barang_id from emit signal
    public function master_barang_idUpdated($data)
    {
        $this->master_barang_id = $data['value'];
    }

    public function master_barang_edit_idUpdated($data)
    {
        $this->masterBarangIdEdit = $data['value'];
    }

    public $rules = [
        'master_barang_id' => 'required',
        'jumlah' => 'required',
        'harga' => 'required',
        'id_satuan' => 'required',
        'merek' => 'required',
    ];


    public function mount($saldo_awal_id)
    {
        $this->saldo_awal = SaldoAwal::findOrFail($saldo_awal_id);
    }

    public function render()
    {
        $list_saldo_awal_item = SaldoAwalItem::where('saldo_awal_id', '=', $this->saldo_awal->id)->with('master_barang')->latest()->paginate(10);
        return view('livewire.saldo-awal.saldo-awal-detail', ['list_saldo_awal_item' => $list_saldo_awal_item]);
    }

    public function saldoAwalItemCreate()
    {
        // todo:
        // save form
        $this->validate();
        $item = SaldoAwalItem::create(array_merge(
            [
                'master_barang_id' => $this->master_barang_id,
                'jumlah' =>  $this->jumlah,
                'harga' => $this->harga,
                'id_satuan' => $this->id_satuan,
                'merek' => $this->merek
            ],
            [
                'saldo_awal_id' => $this->saldo_awal->id,
                'unit_key' => config('persediaan.unit_key'),
                'nomor_bapnb' => $this->saldo_awal->nomor_bapnb,
                'total_harga' => $this->jumlah * $this->harga,
                'created_user_id' => $this->user->id
            ]
        ));
        $this->resetInputForm();
        $this->showCreateSaldoAwalItemForm = false;
    }

    private function resetInputForm()
    {
        $this->master_barang_id = null;
        $this->jumlah = null;
        $this->harga = null;
        $this->id_satuan = null;
        $this->merek = null;
    }

    public function showEditForm($saldo_item_id)
    {
        $this->saldoAwalItemIdBeingEdit = $saldo_item_id;
        $this->saldoAwalItemBeingEdit = SaldoAwalItem::with('master_barang')->findOrFail($this->saldoAwalItemIdBeingEdit);
        $this->masterBarangIdEdit = $this->saldoAwalItemBeingEdit->master_barang_id;
        $this->showEditSaldoAwalItemForm = true;
    }

    public function showDeleteForm($saldo_item_id)
    {
    }

    public function getUserProperty()
    {
        return Auth::user();
    }
}

and here is my blade template

<div>
    <x-jet-button wire:click="$set('showCreateSaldoAwalItemForm', true)" wire:loading.attr="disabled">
        {{ __('Input Rincian') }}
    </x-jet-button>

    <table class="items-center bg-transparent w-full border-collapse ">
        <thead>
            <tr>
                <x-table-header>No. BAPNB</x-table-header>
                <x-table-header>Master Barang</x-table-header>
                <x-table-header>Merek</x-table-header>
                <x-table-header>Jumlah</x-table-header>
                <x-table-header>Harga</x-table-header>
                <x-table-header>Total</x-table-header>
                <x-table-header>Action</x-table-header>
            </tr>
        </thead>

        <tbody>
            @forelse ($list_saldo_awal_item as $saldo_item)
                <tr>
                    <x-table-column>
                        {{ $saldo_item->nomor_bapnb }}
                    </x-table-column>
                    <x-table-column>
                        {{ $saldo_item->master_barang->nama_perkiraan }}
                    </x-table-column>
                    <x-table-column>
                        {{ $saldo_item->merek }}
                    </x-table-column>
                    <x-table-column>
                        {{ $saldo_item->jumlah }}
                    </x-table-column>
                    <x-table-column>
                        {{ $saldo_item->harga }}
                    </x-table-column>
                    <x-table-column>
                        {{ $saldo_item->total_harga }}
                    </x-table-column>
                    <x-table-column>
                        <button class="cursor-pointer ml-6 text-sm text-gray-400 underline" wire:click="showEditForm({{ $saldo_item->id }})">
                            edit
                        </button>
                        <button class="cursor-pointer ml-6 text-sm text-red-500 underline" wire:click="showDeleteForm({{ $saldo_item->id }})">
                            Hapus
                        </button>
                    </x-table-column>
                </tr>
            @empty
                <x-table-column colspan="4">
                    Data Tidak tersedia
                </x-table-column>
            @endforelse                    
        </tbody>
    </table>
    <div>
        {{ $list_saldo_awal_item->links() }}
    </div>

    <x-jet-dialog-modal wire:model="showEditSaldoAwalItemForm">
        <x-slot name="title">
            {{ __('Edit Rincian Saldo Awal') }}
        </x-slot>
        <x-slot name="content">            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <x-jet-label for="master_barang_id" value="{{ __('Master Barang') }}" />
                    <livewire:master-barang-select 
                        :value="$masterBarangIdEdit" 
                        name="master_barang_edit_id" 
                        :selectView="livewire-select::search-selected-option"
                        />
                </div>
            </div>
        </x-slot>
        <x-slot name="footer">
            <x-jet-secondary-button wire:click="$set('showEditSaldoAwalItemForm', false)" wire:loading.attr="disabled">
                {{ __('Cancel') }}
            </x-jet-secondary-button>
            {{--
            <x-jet-button class="ml-2" wire:click="saldoAwalItemCreate" wire:loading.attr="disabled">
                {{ __('Save') }}
            </x-jet-button> --}}
        </x-slot>
    </x-jet-dialog-modal>

    <x-jet-dialog-modal wire:model="showCreateSaldoAwalItemForm">
        <x-slot name="title">
            {{ __('Input Rincian Saldo Awal') }}
        </x-slot>
        <x-slot name="content">            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <x-jet-label for="master_barang_id" value="{{ __('Master Barang') }}" />
                    <livewire:master-barang-select name="master_barang_id" id="master_barang_id"  name="master_barang_id" placeholder="Choose barang" :searchable="true" />
                </div>
                <div>
                    <x-jet-label for="jumlah" value="{{ __('Jumlah') }}" />
                    <x-jet-input id="jumlah" class="block mt-1 w-full" type="text" 
                    wire:model.defer="jumlah"
                    name="jumlah" />
                </div>
                <div>
                    <x-jet-label for="harga" value="{{ __('Harga') }}" />
                    <x-jet-input id="harga" class="block mt-1 w-full" type="text" 
                        wire:model.defer="harga"
                        name="harga"  />
                </div>
                <div>
                    <x-jet-label for="id_satuan" value="{{ __('Satuan') }}" />
                    <x-jet-input id="id_satuan" class="block mt-1 w-full" type="text" 
                        wire:model.defer="id_satuan"
                        name="id_satuan"  />
                </div>
                <div>
                    <x-jet-label for="merek" value="{{ __('Merek') }}" />
                    <x-jet-input id="merek" class="block mt-1 w-full" type="text" 
                        wire:model.defer="merek"
                        name="merek"  />
                </div>
            </div>            
        </x-slot>
        <x-slot name="footer">
            <x-jet-secondary-button wire:click="$set('showCreateSaldoAwalItemForm', false)" wire:loading.attr="disabled">
                {{ __('Cancel') }}
            </x-jet-secondary-button>

            <x-jet-button class="ml-2" wire:click="saldoAwalItemCreate" wire:loading.attr="disabled">
                {{ __('Save') }}
            </x-jet-button>
        </x-slot>
    </x-jet-dialog-modal>
</div>

Any suggestion ? thanks