为什么 mary ui 表定义中的 `expandable` 块被破坏了？

Question

在 laravel 11 / livewire 3.5 中我使用 mary-ui ^1.40.3 应用程序 我尝试使用手册中的表行扩展功能 https://mary-ui.com/docs/components/table#row-expansion

I 货币表我在表定义中添加了

expandable

，并在表块末尾添加了

@scope('expansion'

块：

<x-mary-table :headers="$headers" :rows="$currencies" striped expandable
              :sort-by="$sortBy" with-pagination  show-empty-text empty-text="No currencies found. Try to change filter criteria"
              :per-page-values="[10, 25, 50, 100]" >

    @scope('actions', $currency)
        <div class="flex w-32 max-h-8">
            <div class="w-16 px-2">
                <x-mary-button :icon="IconEnum::Edit->value" wire:click="edit({{ $currency->id }})" spinner
                              class="btn-sm btn-primary max-h-6"
                />
            </div>
            <div class="w-16 align-items-end justify-end align-top">
                <x-mary-button :icon="IconEnum::Delete->value" wire:click="delete({{ $currency->id }})" spinner
                           class="btn-sm btn-error max-h-6"
                           wire:confirm="Are you sure you want to delete this currency?"
                />
            </div>
        </div>
    @endscope

    @scope('cell_name', $currency)
    <span class="whitespace-nowrap">
            {{ $currency->name }}
        </span>
    @endscope

    @scope('header_id', $header)
    <h2 class="text-xl font-bold text-grey-100">
        {{ $header['label'] }}
        <x-mary-icon :name="IconEnum::KeyField->value"/>
    </h2>
    @endscope

    @scope('cell_active', $currency)
    @if($currency->active === CurrencyActiveEnum::ACTIVE)
        <span class="whitespace-nowrap">
            <x-mary-badge :value="CurrencyActiveEnum::getLabel($currency->active)" class="badge-primary"/>
        </span>
    @else
        <span class="whitespace-nowrap">
            {{ CurrencyActiveEnum::getLabel($currency->active) }}
        </span>
    @endif
    @endscope

    @scope('cell_description', $currency)
    <span class="whitespace-nowrap">
            <x-mary-popover>
                <x-slot:trigger>
                    <x-mary-badge :value="Str::limit(strip_tags($currency->description), 20)"/>
                </x-slot:trigger>
                <x-slot:content>
                    {{strip_tags($currency->description) }}
                </x-slot:content>
            </x-mary-popover>
        </span>
    @endscope

    @scope('cell_created_at', $currency)
        <span class="whitespace-nowrap">
            {{ DateConv::getFormattedDateTime($currency->created_at) }}
        </span>
    @endscope

    {{-- Special `expansion` slot --}}
    @scope('expansion', $currency)
    <div class="bg-base-200 p-8 font-bold">
        currency_histories_count::{{ $currency->currency_histories_count }}<hr>
        user_currency_subscriptions_count::{{ $currency->user_currency_subscriptions_count }}<hr>
    </div>
    @endscope
</x-mary-table>

但是在我的 Chrome 浏览器的控制台中我看到错误（表格的一行有 1 个这样的错误）：

livewire.js?id=ec3a716b:1120 Alpine Expression Error: this.selection.includes is not a function

Expression: "isExpanded(27) || '-rotate-90 !text-current'"


livewire.js?id=ec3a716b:1120 Alpine Expression Error: this.selection.includes is not a function

Expression: "isExpanded(27) || 'hidden'"


livewire.js?id=ec3a716b:1120 Alpine Expression Error: this.selection.includes is not a function

我看到扩展的切换器图像 - 但它已打开并且不会切换块：

我的扩展代码可能有什么问题？

Answer 1

您的表格中需要有wire：model =“expanded”

<x-table wire:model="expanded" expandable ...

在你的Livewire组件中

public array $expanded = [];