Laravel Filament FileUpload 无法正确渲染

Question

所以我在 Blade 文件内有三个选项卡，在每个选项卡内我都有实现 HasForms 或 HasTable 的 Livewire 组件，第一个选项卡始终处于活动状态。

在第三个选项卡中，我有产品详细信息，它有文件上传输入字段以及其他字段，例如图像、名称 如果我移至此选项卡，FileUpload 将显示奇怪的行为。看起来不错，PDF 可见，但无法打开或下载。但如果我重新加载页面，那么一切都会正常 在此输入图片描述

                    <nav class="relative z-0 rounded-lg shadow flex divide-x divide-gray-200" aria-label="Tabs">

                        <a @click.prevent="tab = 'parts'; window.location.hash = 'parts'" href="#">
                            <span>Parts & Sub-Products</span>
                        </a>

                        <a @click.prevent="tab = 'units'; window.location.hash = 'units'" href="#">
                            <span>Fabricated Units</span>
                        </a>

                        <a @click.prevent="tab = 'product'; window.location.hash = 'product'" href="#">
                            <span>Product Editor</span>
                        </a>
                    </nav>
            <div x-show="tab === 'parts'" style="display:none;">
                @livewire('parts', ['product' => $product, 'materials' => $materials])
            </div>

            <!-- Units -->
            <div x-show="tab === 'units'" style="display:none;">
                <div class="mb-5">
                    <h2 class="font-semibold text-xl text-gray-800 leading-tight">Fabricated Units</h2>
                    <p>Here is list of Fabricated units</p>
                </div>
                @livewire('fabricated-unit', ['product' => $product])
            </div>

            <!-- Product editor -->
            <div x-show="tab === 'product'" style="display:none;">
                <div class="mb-5">
                    <h2 class="font-semibold text-xl text-gray-800 leading-tight">Product Editor</h2>
                    <p>You can edit or update your product here</p>
                </div>
                @livewire('product-editor', ['product' => $product])
            </div>

这是产品编辑器

class ProductEditor extends Component implements HasForms
{
    use InteractsWithForms;

    public ?array $data = [];

    public Product $product;

    public function mount(Product $product): void
    {
        $this->product = $product;
        $this->form->fill($product->toArray());
    }
    public function render()
    {
        return view('livewire.product-editor');
    }

    public function form(Form $form): Form
    {
        return $form
            ->schema([

                        TextInput::make('name')->label('Product Name')->required()->string()->minLength(3)->maxLength(255),
                        TextInput::make('product_number')->label('Product Number')->required()->string()->minLength(3)->maxLength(255),
                        TextInput::make('gtin_number')->label('GTIN Number')->nullable()->string()->minLength(1)->maxLength(255),
                        Select::make('category_id')
                                ->label('Category')
                                ->options(Category::where('team_id', auth()->user()->currentTeam->id)->get()->pluck('name', 'id'))
                                ->searchable(),
                        FileUpload::make('images')->disk('product_photos')->nullable()->multiple()
                            ->image()->reorderable()->maxSize('5120'),
                        FileUpload::make('data_sheet_file')->label('Product Data Sheet')->disk('product_manuals')->openable()->downloadable()->previewable(false)  //Here is a problem
                            ->nullable()->acceptedFileTypes(['application/pdf']),
                        Textarea::make('description')->label('Description')->nullable()->string()->minLength(1)->maxLength(1024),

          ])
            ->statePath('data')
            ->model($this->product);
    }
}

Answer 1

我自己花了很长时间才找到解决方案 而不是手动添加这个

FileUpload::make("custom_inputs.{$field->field_name}) 

改为这样做

FileUpload::make($field->field_name) 

并在网格架构末尾添加 add

->statePath('custom_inputs') 

像这样

Grid::make()->columns(1)->visible($this->customFields->count() > 0)                             ->schema(getDynamicSchema($this->customFields))->statePath('custom_inputs')