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"

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());
                    }),

                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

components.score

looks like this:

<livewire:score-modal :siteId="$site->id" :score="$score" :key="$site->id . '-modal-' . $score">

 </livewire:score-modal>

<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

<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

/app/Livewire/ScoreModal.php

component... As I mentioned before everything is working but I keep getting these livewire errors. I've tried adding

:key

:key

wire:key

wire:key

to wherever possible but it seems to make no difference.

I'm probably missing something obvious/simple here?

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

Snapshot missing on Livewire component with id: R1rsgkBVrClAl8P8eYzL"

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());
                    }),

                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

components.score

looks like this:

<livewire:score-modal :siteId="$site->id" :score="$score" :key="$site->id . '-modal-' . $score">

 </livewire:score-modal>

<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

<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

/app/Livewire/ScoreModal.php

component... As I mentioned before everything is working but I keep getting these livewire errors. I've tried adding

:key

:key

wire:key

wire:key

to wherever possible but it seems to make no difference.

I'm probably missing something obvious/simple here?

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

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

Similar Threads

Similar Threads

Similar Threads