FilamentF
Filament•2y ago
CT

Correct way to add/create a Livewire table column component?

I have a table that when clicked opens a modal and runs some calculations. The calculations are expensive so I do not want to do them until the button is clicked. I have a working solution, but the problem is it will break when switching views with errors such as:
Snapshot missing on Livewire component with id: R1rsgkBVrClAl8P8eYzL"

The code I have is as follows;
                Tables\Columns\TextColumn::make('score_100')
                    ->label(__('Score 100'))
                    ->state(function (Site $site) {
                        if (!$site->score_100) {
                            return null;
                        }

                        return new HtmlString(view('components.score', [
                            'site' => $site,
                            'score' => $site->score_100
                        ])->render());
                    }),

and components.score looks like this:
<livewire:score-modal :siteId="$site->id" :score="$score" :key="$site->id . '-modal-' . $score">

 </livewire:score-modal>

The livewire score modal looks like this:
<div :key="container-{{ $siteId }}">
    <button wire:click="openModal({{ $siteId }})" class="cursor-pointer">
        {{ $score }}
    </button>

    @if (isset($selectedSite))
        <x-filament::modal
            width="4xl"
            id="score-modal-{{ $selectedSite->id . '-' . $score }}">
    ... rest of the modal

And all the calculations happen within the /app/Livewire/ScoreModal.php component... As I mentioned before everything is working but I keep getting these livewire errors. I've tried adding :key or wire:key to wherever possible but it seems to make no difference.

I'm probably missing something obvious/simple here?
Was this page helpful?