Livewire 組件的 [admin-search] 公共屬性 [admins] 必須是以下類型：[numeric, string, array, null, or boolean]

Question

我使用 Laravel v8x 和 Livewire，我需要對這個 livewire 使用分頁。 當我嘗試從管理員的收藏中創建分頁頁面時，我收到了這個錯誤。 我需要使用 livewire 搜索進行分頁

刀

<div class="card-datatable table-responsive pt-0">
                    <div id="DataTables_Table_0_wrapper" class="dataTables_wrapper dt-bootstrap5 no-footer">
                        <livewire:admin-search />
                    </div>
                </div>

活線刀片

<div>
    {{-- Stop trying to control. --}}
    <div class="d-flex justify-content-between align-items-center header-actions mx-1 row mt-75">
        <div class="col-sm-12 col-md-4 col-lg-6">
            <div class="dataTables_length" id="DataTables_Table_0_length"><label>عرض <select wire:model="row_no"
                        name="DataTables_Table_0_length" aria-controls="DataTables_Table_0" class="form-select">
                        @if ($admin_count <= 15)
                            <option value="15">15</option>
                        @else
                            @for ($i = 1; $i <= $admin_count; ++$i)
                                @if ($i % 15 == 0)
                                    <option value="{{ $i }}">{{ $i }}</option>
                                @elseif ($i + 1 > $admin_count)
                                    <option value="{{ $i }}">{{ $i }}</option>
                                @endif
                            @endfor
                        @endif
                    </select> المسؤولين</label></div>
        </div>
        <div class="col-sm-12 col-md-8 col-lg-6 ps-xl-75 ps-0">
            <div
                class="dt-action-buttons text-xl-end text-lg-start text-md-end text-start d-flex align-items-center justify-content-md-end align-items-center flex-sm-nowrap flex-wrap me-1">
                <div class="me-1">
                    <div id="DataTables_Table_0_filter" class="dataTables_filter">
                        <label>بحث :<input type="search" class="form-control" placeholder="" wire:model="searchTerm"
                                aria-controls="DataTables_Table_0"></label>
                    </div>
                </div>
                @can('Create-admin')
                    <div class="dt-buttons btn-group flex-wrap"><button class="btn add-new btn-primary mt-50" tabindex="0"
                            aria-controls="DataTables_Table_0" type="button" data-bs-toggle="modal"
                            data-bs-target="#modals-slide-in"><span>اضافة مسؤول جديد</span></button>
                    </div>
                @endcan
            </div>
        </div>
    </div>

    <table class="user-list-table table dataTable no-footer dtr-column" id="DataTables_Table_0" role="grid"
        aria-describedby="DataTables_Table_0_info">
        <thead class="table-light">
            <tr role="row">
                <th class="control sorting_disabled" rowspan="1" colspan="1"
                    style="width: 47.3281px; display: none;" aria-label=""></th>
                <th class="sorting" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1"
                    style="width: 5px;" aria-label="User: activate to sort column ascending">#</th>
                <th class="sorting" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1"
                    style="width: 109.984px;" aria-label="User: activate to sort column ascending">الاسم</th>
                <th class="sorting sorting_desc" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1"
                    colspan="1" style="width: 123.109px;" aria-sort="descending"
                    aria-label="Email: activate to sort column ascending">البريد</th>
                <th class="sorting sorting_desc" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1"
                    colspan="1" style="width: 123.109px;" aria-sort="descending"
                    aria-label="Email: activate to sort column ascending">الهاتف</th>
                <th class="sorting sorting_desc" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1"
                    colspan="1" style="width: 123.109px;" aria-sort="descending"
                    aria-label="Email: activate to sort column ascending">العمر</th>
                <th class="sorting" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1"
                    style="width: 139.875px;" aria-label="Status: activate to sort column ascending">حالة الحساب</th>
                @canany(['Update-admin', 'Delete-admin'])
                    <th class="sorting_disabled" rowspan="1" colspan="1" style="width: 173.734px;"
                        aria-label="Actions">الإعدادات</th>
                @endcanany
            </tr>
        </thead>
        <tbody>
            @php
                $counter = 1;
            @endphp
            @foreach ($admins as $admin)
                <tr>
                    <td>
                        {{ $admin->id }}
                    </td>
                    <td>
                        {{ $admin->fname . ' ' . $admin->lname }}
                    </td>
                    <td>
                        {{ $admin->email }}
                    </td>
                    <td>
                        {{ $admin->phone }}
                    </td>
                    <td>
                        {{ $admin->age }}
                    </td>
                    <td>
                        <span
                            class="badge badge-glow @if (!$admin->active) bg-danger @else bg-success @endif">{{ $admin->status }}</span>
                    </td>
                    @canany(['Update-admin', 'Delete-admin'])
                        <td>
                            <div class="btn-group" role="group" aria-label="Basic example">
                                @can('Update-admin')
                                    <a href="{{ route('admins.edit', Crypt::encrypt($admin->id)) }}"
                                        class="btn btn-primary waves-effect waves-float waves-light">تعديل</a>
                                @endcan
                                @can('Delete-admin')
                                    <button type="button" onclick="confirmDestroy({{ $admin->id }}, this)"
                                        class="btn btn-danger waves-effect waves-float waves-light">حذف</button>
                                @endcan
                            </div>
                        </td>
                    @endcanany
                </tr>
                @php
                    ++$counter;
                @endphp
            @endforeach
            <tr class="odd" wire:loading>
                <td valign="top" colspan="6" class="dataTables_empty">يبحث...</td>
            </tr>
        </tbody>
    </table>

</div>

<div class="container">
    <div class="row">
        <div class="col-12 align-items-center text-center">
            {{ $admins->links() }}
        </div>
    </div>
</div>

Livewire 組件

 <?php

namespace App\Http\Livewire;

use App\Models\Admin;
use Livewire\Component;
use Livewire\WithPagination;

class AdminSearch extends Component
{
    use WithPagination;

    public $searchTerm;
    public $row_no = 10;
    public $admins;
    public $admin_count = 0;

    public function mount()
    {
        $this->admin_count = Admin::getByAuthUserInfo()->count();
    }

    public function render()
    {
        $this->admins = Admin::orWhere([
            ['fname', 'Like', '%' . $this->searchTerm . '%'],
        ])
            ->where('user_id', auth('user')->user()->id)
            ->orderBy('fname')
            ->take($this->row_no)
            ->paginate(12);

        return view('livewire.admin-search');
    }
}

以及來自 AdminController 的索引 function

public function index()
    {
        // Check Ability
        $this->checkUserAbility('Read-admin');
        //
        $admins = Admin::getByAuthUserInfo()->get();
        $roles = Role::where('guard_name', 'admin')->get();

        // Store Log
        $this->storeUserLogs('browse admins');

        return response()->view('cms.admins.index', [
            'admins' => $admins,
            'password' => $this->generateNewPassword(8),
            'roles' => $roles,
        ]);
    }

而且我還嘗試從 controller 中的索引 function 制作它，它可以正常工作，但不會更改表格中的表格內容

AdminController 中的索引 controller function

public function index()
    {
        // Check Ability
        $this->checkUserAbility('Read-admin');
        //
        $admins = Admin::getByAuthUserInfo()->paginate(12);
        $roles = Role::where('guard_name', 'admin')->get();

        // Store Log
        $this->storeUserLogs('browse admins');

        return response()->view('cms.admins.index', [
            'admins' => $admins,
            'password' => $this->generateNewPassword(8),
            'roles' => $roles,
        ]);
    }

結果圖像

1. Page3：來自第 3 頁分頁的圖像
2. Page4：來自第 4 頁分頁的圖像

Answer 1

嘿，您的解決方案非常簡單，您收到此錯誤是因為 livewire 無法在頁面渲染后定義集合 var

而不是在公共組件中定義 admins 變量只是在渲染 function 中通過視圖

$admins = Admin::orWhere([
        ['fname', 'Like', '%' . $this->searchTerm . '%'],
    ])
        ->where('user_id', auth('user')->user()->id)
        ->orderBy('fname')
        ->take($this->row_no)
        ->paginate(12);
return view('livewire.admin-search',['admins']);

並刪除您的公共變量