使用 paginate() 方法时，Livewire 错误中不支持属性类型

Question

我正在尝试在 laravel livewire 表下显示分页链接。现在我使用 get() 方法来显示数据，并更改为 paginate() 以在第一页中仅显示两个结果。 Livewire 组件包含在资源 iews\product.blade.php 的视图中。我收到特定错误，突出显示我包含 livewire 组件的代码行：@livewire('product.show', ['items' => $items])。

当我尝试使用 get 方法时它工作正常。但是，当我更改为分页方法时，它显示错误Livewire 属性不支持属性类型...。

app\Http\Controllers\ProductController.php

...
public function index()
    {
        $items = Category::all();
        return view('product', compact('items'));

    }
...

资源 iews\product.blade.php

<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">{{ __('Dashboard') }}</div>

                <div class="card-body">

                    @livewire('product.show', ['items' => $items])


                </div>
            </div>
        </div>
    </div>
</div>

Livewire 组件

• 应用\Livewire\产品\Show.php

namespace App\Livewire\Product;

use Livewire\Component;
use Illuminate\Http\this;
use Illuminate\Support\Str;
use App\Models\Category;
use Livewire\WithPagination;

use App\Models\Product;

class Show extends Component
{
    use WithPagination;

    public $products, $items, $name, $unit, $category,$price,$percentage,$discount,$start_date,$end_date,$tax_percentage,$tax_amount,$net_price,$stock_quantity;
    public $listMode = true;
    public $updateMode = false;
    public $selectedCategories = [];

    public $sortBy = 'name';
    public $sortDirection = 'asc';

    public function render()
    {
        //$this->items = Category::all();

        $this->products = Product::query()
        ->orderBy($this->sortBy, $this->sortDirection)
        ->paginate(2);
        return view('livewire.product.show');

    }

• 资源 iews\livewire\product\show.blade.php

<div>
    <div class="pull-right">
        <a class="btn btn-success" wire:click="create"> Create New Product</a>
        @if($listMode)
        <table class="table table-bordered">
            <tr>
                <th>Product ID</th>
                <th>Image</th>
                <th wire:click="sortByField('name')" style="cursor: pointer;">Name <i class="fa-solid fa-sort"></i></th>
                <th>Unit</th>
                <th>Category</th>
                <th wire:click="sortByField('price')" style="cursor: pointer;">Price <i class="fa-solid fa-sort"></i> </th>
                <th>Discount Percentage</th>
                <th>Tax Percentage</th>
                <th>Net Price</th>
            </tr>
            @foreach ($products as $product)
            <tr>
                <td>{{ $product->product_id }}</td>
                <td>...</td>
                <td>{{ $product->name }}</td>
                <td>{{ $product->unit }}</td>
                <td>{{ $product->categories->pluck('name')->implode(', ') }}</td>
                <td>{{ $product->price }}</td>
                <td>{{ $product->percentage }}</td>
                <td>{{ $product->tax_percentage }}</td>
                <td>{{ $product->net_price }}</td>
            </tr>
            @endforeach
        </table>

        @else
                @if($updateMode)
                @include('livewire.product.update')
                @else
                    @include('livewire.product.create')
                @endif
        @endif

{{ $products->links() }}

    </div>

</div>

请注意：我已经尝试挂载 $items = Category::all(); Livewire 组件中的值。但它仍然显示相同的错误。

Answer 1

在官方文档中给出了分页如何工作的最佳示例。 https://livewire.laravel.com/docs/pagination

避免使用

public $post

属性进行分页

它可以很好地与

view()

函数中的传递变量配合使用

您的组件

<?php

namespace App\Livewire;

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

class ListPost extends Component
{
    use WithPagination;

    public function render()
    {
        return view('livewire.list-post', [
            'posts' => Post::paginate(10),
        ]);
    }
}

您的组件视图文件

<div>
    <div>
        <ol>
            @foreach ($posts as $post)
                <li>{{ $post->title }}</li>
            @endforeach
        </ol>
    </div>
 
    {{ $posts->links() }}
</div>

输出将如下所示。

此外，您可以查看 GitHub 讨论 进行同样的操作。