Livewire PowerGrid懒加载失效求助：$item未定义报错

问题详情 #

配置PowerGrid懒加载后，页面抛出以下错误：

Uncaught ReferenceError: $item is not defined
Alpine表达式错误：$item未定义，表达式为"$item"

对应DOM片段显示懒加载子组件的属性绑定异常：

<livewire:lazy-child key="bd47ef2b1fbba808b5f338c39f1043a9" :child-index="$item" :$this->…</livewire:lazy-child>

相关组件代码：

<?php

namespace App\Livewire;

use App\Models\User;
use Illuminate\Support\Carbon;
use Illuminate\Database\Eloquent\Builder;
use PowerComponents\LivewirePowerGrid\Button;
use PowerComponents\LivewirePowerGrid\Column;
use PowerComponents\LivewirePowerGrid\Exportable;
use PowerComponents\LivewirePowerGrid\Facades\Filter;
use PowerComponents\LivewirePowerGrid\Footer;
use PowerComponents\LivewirePowerGrid\Header;
use PowerComponents\LivewirePowerGrid\PowerGrid;
use PowerComponents\LivewirePowerGrid\PowerGridFields;
use PowerComponents\LivewirePowerGrid\PowerGridComponent;
use PowerComponents\LivewirePowerGrid\Traits\WithExport;

use Illuminate\Support\Facades\Auth;

use App\Livewire\Admin\USer\UserIndex;

use App\Helpers\PermissionHelper;
use PowerComponents\LivewirePowerGrid\Facades\Rule;
use Illuminate\Support\Facades\Blade;

use PowerComponents\LivewirePowerGrid\Lazy;

final class UserTable extends PowerGridComponent
{
    use WithExport;

    public string $tableName = 'UserAdminTable';
    public $selectRowUser = 0;

    public function setUp(): array
    {
        $this->showCheckBox();

        return [
            Exportable::make('export')
                ->striped()
                ->type(Exportable::TYPE_XLS, Exportable::TYPE_CSV),
            Header::make()->showSearchInput(),
            Footer::make()
                ->showRecordCount()
                ->showRecordCount(),
            Lazy::make()
                ->rowsPerChildren(25),
        ];
    }

    public function template(): ?string
    {
        return \App\PowerGridThemes\SmallFontTheme::class;
    }

    public function datasource(): Builder
    {
        $this->showAllUser= session()->get('showAllUser');
        if ($this->showAllUser) {
            return User::query();
        } else {
            return  User::query()->where('is_active', 1);
        }
    }

    public function relationSearch(): array
    {
        return [];
    }

    public function fields(): PowerGridFields
    {
        return PowerGrid::fields()
    ->add('selectButton', function ($row) {
        return Blade::render('
        <button 
            class="btn bg-gray-300 btn-xs mx-2"
        >
            Wybierz
        </button>');
    })
 
    ->add('burger', function ($row) {
            $deleteLabel = $row->is_active == 1 ? 'Dezaktywuj' : 'Aktywuj';
            return Blade::render(
            'dropdown button code here'
            );
        })
            ->add('user_name')
            ->add('email')
            ->add('first_name')
            ->add('last_name')
            ->add('is_active', fn ($prop) => e($prop->is_active == 1 ? 'Aktywne' : 'Dezaktywowane'));
    }

    public function columns(): array
    {
        return [
            Column::make('Wybierz', 'selectButton')->bodyAttribute('sticky left-0')
            ->headerAttribute('sticky left-0 h-fit'),
            Column::make('Opcje', 'burger'),
    
            Column::make('Login', 'user_name')
                ->sortable()
                ->searchable(),
       

            Column::make('Imię', 'first_name')
                ->sortable()
                ->searchable(),

            Column::make('Nazwisko', 'last_name')
                ->sortable()
                ->searchable(),

            Column::make('Email', 'email')
                ->sortable()
                ->searchable(),
        ];
    }

    
    
    #[\Livewire\Attributes\On('editUser')]
    public function edit($rowId, $userName): void
    {
        $this->dispatch('editUser', [$rowId, $userName])->to(UserIndex::class);
    }

    #[\Livewire\Attributes\On('selectUser')]
    public function select($rowId): void
    {
        $this->selectRowUser = $rowId;
        $this->dispatch('selectUser', [$rowId])->to(UserIndex::class);
    }

    #[\Livewire\Attributes\On('addProfile')]
    public function addProfile($rowId, $userName, $symbol): void
    {
        $this->dispatch('addProfile', [$rowId, $userName, $symbol])->to(UserIndex::class);
    }


}

问题原因 #

错误根源在于自定义列（selectButton和burger）使用Blade::render()渲染内容时，破坏了PowerGrid懒加载机制的上下文绑定。$item变量是懒加载子组件所需的上下文变量，而Blade::render()会在独立环境中解析模板，导致Alpine无法在当前上下文中找到该变量。

解决方案 #

方案1：移除Blade::render()，直接返回HTML字符串 #

将自定义列的渲染逻辑改为直接返回HTML，避免破坏Livewire/Alpine的上下文：

public function fields(): PowerGridFields
{
    return PowerGrid::fields()
        ->add('selectButton', function ($row) {
            return '<button class="btn bg-gray-300 btn-xs mx-2">Wybierz</button>';
        })
        ->add('burger', function ($row) {
            $deleteLabel = $row->is_active == 1 ? 'Dezaktywuj' : 'Aktywuj';
            // 直接返回下拉按钮的HTML字符串，替换原Blade::render内容
            return sprintf('<div class="dropdown">
                <button class="btn btn-xs dropdown-toggle" type="button" data-bs-toggle="dropdown">
                    %s
                </button>
                <ul class="dropdown-menu">
                    <!-- 下拉选项内容 -->
                </ul>
            </div>', e($deleteLabel));
        })
        ->add('user_name')
        ->add('email')
        ->add('first_name')
        ->add('last_name')
        ->add('is_active', fn ($prop) => e($prop->is_active == 1 ? 'Aktywne' : 'Dezaktywowane'));
}

方案2：若必须使用Blade模板，手动传递上下文变量 #

如果需要复用Blade模板，需将$item等上下文变量显式传递给Blade::render()：

->add('selectButton', function ($row, $item) { // 接收$item参数
    return Blade::render('
        <button 
            class="btn bg-gray-300 btn-xs mx-2"
        >
            Wybierz
        </button>', ['item' => $item]); // 传递变量到模板
})

额外检查 #

• 确认自定义主题SmallFontTheme未修改懒加载相关的DOM结构，避免上下文丢失
• 验证Lazy::make()->rowsPerChildren(25)配置正确，无语法错误

内容的提问来源于stack exchange，提问作者Rolegur