My bad, it works, I didn't published vendor ...
Feb 27, 2026
7
Level 2
Problem with livewire slots
Hi,
I've some problems with livewire slots. It doesn't works. I follow Caleb podcast and I don't understand what's wrong with my code .
Here is my list component :
<?php
use App\Models\Referential\TreasuryTypeModel;
use Livewire\Attributes\Computed;
use Livewire\Attributes\Layout;
use Livewire\Attributes\Title;
use Livewire\Component;
new
#[Layout('layouts.admin.app')]
#[Title('Types de trésoreries')]
class extends Component {
use \Livewire\WithPagination;
public $sortBy = 'name';
public $sortDirection = 'asc';
public $selected = [];
#[Computed]
public function treasuries()
{
return TreasuryTypeModel::select('id', 'name', 'updated_at', 'deleted_at')
->tap(fn($query) => $this->sortBy ? $query->orderBy($this->sortBy, $this->sortDirection) : $query)
->paginate(15);
}
public function deletedSelected()
{
TreasuryTypeModel::whereIn('id', $this->selected)->delete();
$this->selected = [];
}
public function delete(string $id)
{
TreasuryTypeModel::where('id', $id)->delete();
}
};
?>
<div class="max-w-5xl h-full">
<div class="flex items-center justify-between">
<div>
<flux:heading size="xl">Treasuries</flux:heading>
<flux:text class="mt-2">Manage your treasuries</flux:text>
</div>
<div class="flex gap-2">
@if (count($this->selected) > 0)
<div class="max-lg:hidden flex justify-start items-center gap-2">
<flux:subheading class="whitespace-nowrap">
<span>{{ count($this->selected) }}</span> selected:
</flux:subheading>
<flux:button size="sm" variant="danger" icon="trash" wire:click="deletedSelected">Delete</flux:button>
</div>
<flux:separator vertical class="max-lg:hidden mx-2 my-2" />
@endif
<flux:button variant="primary" icon="plus" size="sm">Add treasury type</flux:button>
</div>
</div>
<div class="mt-8 grid grid-cols-3 gap-6">
@foreach($this->treasuries as $treasury)
<livewire:pages::admin.referentials.treasury-types.card
:$treasury
:wire:key="$treasury->id"
:lazy.bundle="$loop->iteration > 9"
>
<livewire:slot name="checkbox">
{{ $treasury->id }}
<flux:checkbox wire:model.live="selected" :value="$treasury->id" />
</livewire:slot>
<livewire:slot name="options">
<flux:dropdown position="bottom" align="end" offset="-15">
<flux:button variant="ghost" size="sm" icon="ellipsis-vertical" inset="top bottom"></flux:button>
<flux:menu>
<flux:menu.item>Edit</flux:menu.item>
<flux:menu.item variant="danger" wire:click="delete('{{ $treasury->id }}')">delete</flux:menu.item>
</flux:menu>
</flux:dropdown>
</livewire:slot>
</livewire:pages::admin.referentials.treasury-types.card>
@endforeach
</div>
</div>
Here is my card component :
<?php
use App\Models\Referential\TreasuryTypeModel;
use Livewire\Component;
new class extends Component {
public TreasuryTypeModel $treasury;
};
?>
@placeholder
<flux:skeleton class="min-h-56 rounded-lg" animate="shimmer" />
@endplaceholder
<flux:card {{ $attributes->class('flex flex-col justify-between p-4 rounded-lg') }} variant="filled">
<div>
<div class="flex items-start justify-between">
<flux:heading size="lg" class="{{ $treasury->trashed() ? 'text-zinc-500' : 'text-zinc-600' }}">{{ $treasury->name }}</flux:heading>
@if ($slots->has('checkbox'))
{{ $slots['checkbox'] }}
@endif
</div>
<flux:text class="mt-1 text-xs {{ $treasury->trashed() ? 'text-zinc-500' : 'text-zinc-600' }}">{{ $treasury->updated_at->format('Y-m-d H:i') }}</flux:text>
</div>
<div class="mt-6 flex justify-between">
<div class="flex item-center">
@if ($treasury->trashed())
<flux:badge rounded size="sm">Inactive</flux:badge>
@else
<flux:badge rounded size="sm" variant="solid">Active</flux:badge>
@endif
</div>
@if ($slots->has('options'))
{{ $slots['options'] }}
@endif
</div>
</flux:card>
The problem is, when I check checkboxes, nothing happen. It works if I put checkbox outside of the slot but inside no. I don't understand why. Anyone can help ?
Please or to participate in this conversation.