如何在Livewire 3.x中用自定义组件定制Repeater项？

问题背景 #

在Livewire 3.x环境下，使用Filament的Repeater组件时，需要将Repeater的每一行替换为自定义的Livewire组件OpportunityQuoteItem，但发现Repeater的schema方法中传入的$state是整个Repeater的多维状态数组，而非单个行的状态，无法直接传递给自定义组件。

解决方案 #

Filament的Repeater组件在schema闭包中提供了$get辅助函数，通过$get('.')可以获取当前Repeater项的完整状态（.代表当前项的根路径）。利用这个特性，我们可以将当前行的状态传递给自定义Livewire组件：

1. 修改主组件的Repeater配置 #

在OpportunityQuote组件的form方法中，更新Repeater的schema，引入自定义组件并通过arguments传递当前行状态：

public function form(Form $form): Form
{
    return $form
        ->schema([
            Repeater::make('quote_services_repeater')
                ->label('Serviços Adicionados')
                ->itemLabel(function (array $state) {
                    return new HtmlString(
                        view('filament.components.service-repeater-item')
                            ->with('state', $state)
                            ->render()
                    );
                })
                ->schema(function (array $state, callable $get) { // 注入$get辅助函数
                    return [
                        // 引入自定义Livewire组件并传递当前行状态
                        Livewire::make(OpportunityQuoteItem::class)
                            ->arguments([
                                'item' => $get('.') // 获取当前行的完整状态
                            ])
                            ->columnSpanFull(), // 让组件占满整行（可根据布局调整）
                    ];
                })
                ->columns(4)
                ->defaultItems(1)
                ->collapsible()
                ->collapsed()
                ->orderable(false)
                ->addable(false)
        ])->statePath('quote_services');
}

2. 简化自定义组件（可选） #

Livewire会自动处理参数传递，OpportunityQuoteItem组件可去掉mount方法，直接声明属性即可：

class OpportunityQuoteItem extends Component
{
    public ?array $item = [];

    public function render()
    {
        return view('livewire.opportunity.quote-item');
    }
}

3. 视图层使用数据 #

在livewire.opportunity.quote-item视图中，直接使用$item数组内的数据：

<div class="p-4 border rounded">
    <p>服务名称: {{ $item['name'] ?? '未设置' }}</p>
    <!-- 其他需要展示/编辑的字段 -->
</div>

关键说明 #

• $get('.')是Filament表单的核心辅助函数，在Repeater项内部，.指向当前项的状态根路径，能精准获取单行数据。
• 如果需要双向绑定，可在自定义组件中修改$item数组，Livewire会自动同步回父组件的Repeater状态。

内容的提问来源于stack exchange，提问作者José Victor