Filament表单提交后数据无法传入Wire Elements模态框求助

我有一个包含Select和DatePicker的Filament表单，希望在提交时将填写的数据传递给通过提交事件触发的Wire Elements模态框，但提交后弹出的模态框中{{ dd($data) }}无内容显示，请问我哪里操作有误？

现有实现代码 #

Filament Form组件 #

class Create extends Component implements HasForms {
use InteractsWithForms;

public $data;

public function mount($office = null): void 
{
    $this->office = $office;
    $this->form->fill([
        'office_id' => $this->office,
    ]);
}

protected function getFormSchema(): array
{
    return [
        Section::make('User (Admin)')
            ->schema([
                    Select::make('user_id')
                        ->label('User')
                        ->options(User::orderBy('name')->get()->pluck('name', 'id'))
                        ->columnSpan(2)
                        ->searchable()
                        ->default(Auth::id())
                        ->disablePlaceholderSelection()
                        ->required(),
        ])->columns([
            'sm' => 1,
            'xl' => 2])
        ->hidden(Auth::user()->admin != true),

        Section::make('Date')
            ->schema([
                    DatePicker::make('date')
                        ->label('Date')
                        ->minDate(now()->startOfDay()->addDay())
                        ->displayFormat('d.m.Y')
                        ->required()
                        ->columnSpan(2),
        ])->columns([
            'sm' => 1,
            'xl' => 2]),
}

protected function getFormStatePath(): string 
{
    return 'data';
}

public function render()
{
    return view('livewire.reservations.create');
}}

表单Blade模板 #

<form wire:submit.prevent='$emit("openModal", "modal.reservations", {{ json_encode(["data" => $data]) }})'>
    {{ $this->form }}

    <x-button type="submit" class="mt-4">
        Show Details
    </x-button>
</form>

模态框组件 #

class ReservationsShowDesks extends ModalComponent {
public $data;

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

public function close()
{
    $this->closeModal();
}

public function render()
{
    return view('livewire.modal.reservations');
}}

错误原因与修复方案 #

核心错误 #

你在Blade模板中直接使用{{ json_encode(["data" => $data]) }}生成emit参数，这部分代码是页面首次渲染时的静态值，用户填写表单后，Livewire组件内的$data已经更新，但Blade不会重新渲染这段代码，导致传递给模态框的始终是页面加载时的初始空数据。

修复步骤 #

1. 修改Filament Form组件，添加提交方法

在Create组件中新增submit方法，通过组件内部触发emit事件，传递最新的$data：

class Create extends Component implements HasForms {
    use InteractsWithForms;

    public $data;
    public $office; // 补全未声明的属性

    public function mount($office = null): void 
    {
        $this->office = $office;
        $this->form->fill([
            'office_id' => $this->office,
        ]);
    }

    // 新增提交方法
    public function submit()
    {
        $this->validate(); // 先执行表单验证
        $this->emit('openModal', 'modal.reservations', ['data' => $this->data]);
    }

    protected function getFormSchema(): array
    {
        return [
            Section::make('User (Admin)')
                ->schema([
                        Select::make('user_id')
                            ->label('User')
                            ->options(User::orderBy('name')->get()->pluck('name', 'id'))
                            ->columnSpan(2)
                            ->searchable()
                            ->default(Auth::id())
                            ->disablePlaceholderSelection()
                            ->required(),
                ])->columns([
                    'sm' => 1,
                    'xl' => 2])
                ->hidden(Auth::user()->admin != true),

            Section::make('Date')
                ->schema([
                        DatePicker::make('date')
                            ->label('Date')
                            ->minDate(now()->startOfDay()->addDay())
                            ->displayFormat('d.m.Y')
                            ->required()
                            ->columnSpan(2),
                ])->columns([
                    'sm' => 1,
                    'xl' => 2]),
        ]; // 补全缺失的数组闭合括号
    }

    protected function getFormStatePath(): string 
    {
        return 'data';
    }

    public function render()
    {
        return view('livewire.reservations.create');
    }
}

2. 修改Blade模板的表单提交事件

将原来的inline emit逻辑改为调用组件的submit方法：

<form wire:submit.prevent="submit">
    {{ $this->form }}

    <x-button type="submit" class="mt-4">
        Show Details
    </x-button>
</form>

3. 模态框组件保持不变

你的模态框组件逻辑是正确的，无需修改，确保视图中的{{ dd($data) }}能正常输出接收的数据即可。

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