Laravel 10.48.14：查询数组无法传递至模态视图的问题

我尝试从查询语句获取数据并传递到模态框，在selectPermohonanPendaftaran函数里用dd($this->selectedPermohonan)能看到正确的数组数据，模态框也能正常打开，但数组数据就是没法在模态框里展示出来。

后端选择数据的函数代码 #

public function selectPermohonanPendaftaran($ic)
{
    $this->noIc = $ic;
    $record = KlinikPermohonan::join('klinik', 'klinik.kodklinik', '=', 'klinik_permohonan.klinik_id')
        ->join('klinik_cawangan', 'klinik_cawangan.id', '=', 'klinik_permohonan.cawangan_id')
        ->select([
            'klinik.namaklinik as nama_klinik',
            'klinik_cawangan.namacawangan as nama_cawangan',
            'klinik_permohonan.no_tel_klinik',
            'klinik_permohonan.emel_klinik',
            'klinik_permohonan.alamat_klinik',
            'klinik_permohonan.jenis_panel',
            'klinik_permohonan.tkh_permohonan',
            'klinik_permohonan.status_permohonan'
        ])
        ->where('klinik_permohonan.NoIc', $ic)
        ->first();

    if ($record) {
        $this->selectedPermohonan = [
            'namaKlinik'          => $record->nama_klinik,
            'namaCawangan'        => $record->nama_cawangan,
            'noTelKlinik'         => $record->no_tel_klinik,
            'emelKlinik'          => $record->emel_klinik,
            'alamatKlinik'        => $record->alamat_klinik,
            'jenisPanel'          => $record->jenis_panel,
            'fileProfilSyarikat'  => null,
        ];
    }
    // dd($this->selectedPermohonan);

    $this->emit('showModal', 'senaraipermohonan');
}

前端表格触发代码 #

<tbody>
    @foreach($filteredPermohonan as $index => $user)
        <tr>
            <td>{{ $index + 1 }}</td>
            <td>{{ $user->NamaKlinik }}</td>
            <td>{{ $user->tkh_permohonan }}</td>
            <td class="text-center">
                <div class="d-flex justify-content-center">
                    <span class="badge bg-secondary me-1" style="cursor: not-allowed;">
                        {{ $user->Status }}
                    </span>
                </div>
            </td>
            <td>
                <a href="#" wire:click="selectPermohonanPendaftaran('{{ $user->NoIc }}')">
                    <i class="fa fa-pencil"></i>
                </a>
            </td>
        </tr>
    @endforeach
</tbody>

模态框数据展示代码片段 #

<div class="row mb-3">
    <div class="col-md-6">
        <label for="nama_klinik" class="form-label">{{ __("Nama Klinik") }}</label>
    </div>
    <div class="col-md-6">
        <input 
            type="text" 
            class="form-control" 
            wire:model="selectedPermohonan.namaKlinik" 
            readonly>
    </div>
</div>

解决方法 #

1. 确认组件属性声明
   在Livewire组件类顶部，必须声明public $selectedPermohonan = [];，确保它是公共属性，前端才能通过wire:model绑定读取。

2. 检查模态框的Livewire上下文
   确保模态框被包裹在当前Livewire组件的根元素内，避免脱离组件上下文导致无法读取属性。如果用第三方模态框，可尝试给模态框添加wire:ignore.self避免冲突，但需确保数据绑定逻辑正常。

3. 延迟模态框显示，确保数据同步
   数据赋值后先触发视图更新，再打开模态框：

   $this->selectedPermohonan = $data;
   $this->render(); // 强制刷新视图同步数据
   $this->emit('showModal', 'senaraipermohonan');
   

4. 核对绑定键名
   确认selectedPermohonan中的键名（如namaKlinik）和前端wire:model中的名称完全一致，大小写也要严格匹配。

内容的提问来源于stack exchange，提问作者Ilyas Nawawie