robsontenorio / mary

Laravel Blade UI Components for Livewire 3
https://mary-ui.com
Other
958 stars 115 forks source link

Uncaught Snapshot missing on Livewire component with id: rfmRaHTwSyPF3ki1RBDK #544

Closed nfhh closed 1 month ago

nfhh commented 1 month ago

maryUI version

    "robsontenorio/mary": "^1.34"

daisyUI version

    "daisyui": "^4.12.10",

Livewire version

    "livewire/livewire": "^3.5",

What browsers are affected?

Chrome

What happened?

`<?php

use App\Models\Post; use App\Traits\ClearsProperties; use App\Traits\ResetsPaginationWhenPropsChanges; use Illuminate\Database\Eloquent\Builder; use Illuminate\Pagination\LengthAwarePaginator; use Livewire\Attributes\Layout; use Livewire\Attributes\On; use Livewire\Attributes\Title; use Livewire\Attributes\Url; use Livewire\Volt\Component; use Livewire\WithPagination; use Mary\Traits\Toast; use App\Enums\PostStatus;

new

[Layout('components.layouts.admin.app')]

[Title('Posts')]

class extends Component { use Toast, WithPagination, ResetsPaginationWhenPropsChanges, ClearsProperties;

#[Url(except: '')]
public string $search = '';

#[Url(except: '')]
public $status = '';

#[Url]
public array $sortBy = ['column' => 'created_at', 'direction' => 'desc'];

public function filterCount(): int
{
    return (strlen($this->search) ? 1 : 0) + ($this->status !== '' ? 1 : 0);
}

public function posts(): LengthAwarePaginator
{
    return Post::query()
        ->when($this->search, fn(Builder $q) => $q->where('content', 'like', "%$this->search%"))
        ->when($this->status, fn(Builder $q) => $q->where('status', $this->status))
        ->orderBy(...array_values($this->sortBy))
        ->latest()
        ->paginate();
}

public function headers(): array
{
    return [
        ['key' => 'id', 'label' => '#', 'class' => 'w-1'],
        ['key' => 'content', 'label' => 'Content', 'class' => 'w-96', 'sortable' => false],
        ['key' => 'status', 'label' => 'Status', 'class' => 'w-20', 'sortable' => false],
        ['key' => 'created_at', 'label' => 'Created At', 'class' => 'w-28']
    ];
}

public function with(): array
{
    return [
        'headers' => $this->headers(),
        'posts' => $this->posts(),
        'filterCount' => $this->filterCount()
    ];
}

}; ?>

{{-- HEADER --}} {{-- // ... --}} {{-- TABLE --}} @scope('actions', $post) {{-- Remove this component and no error will be reported.--}} @endscope

`

Hello! when click sortBy, an error occurred

livewire.js?id=cc800bf4:4493 Uncaught Snapshot missing on Livewire component with id: XA315WJko7O70B8X4Bqm Is it a bug of x-table component?

WX20240729-155902@2x

robsontenorio commented 1 month ago

That means the issue is inside that component. Probably you have missed its internal wire:key.