如何解决Livewire 分页问题？

问答 / 1 / 5 / 创建于 4年前

<?php

namespace App\Http\Livewire;

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

class ShowProducts extends Component
{
    use WithPagination;
    public $products =array();
    public $type;

    public function render()
    {
        return view('livewire.show-products');
    }

    public function updated()
    {
        $builder =Product::query();
        if (!empty($this->type)) {
            $builder->whereHas('type', function($query) {
                $query->where('name', $this->type);
            });
        }
        $this->products = $builder->get();
    }
}

如果

   $this->products = $builder->get();
换成
   $this->products = $builder->paginate(15);

就会得到以下报错

Livewire\Exceptions\PublicPropertyTypeNotAllowedException
Livewire component's [show-products] public property [products] must be of type: [numeric, string, array, null, or boolean]. Only protected or private properties can be set as other types because JavaScript doesn't need to access them.
http://127.0.0.1:8000/livewire/message/show-products

官方教程也没看明白！

https://learnku.com/docs/laravel/8.x/pagination/9402

李小明

课程读者 237 声望

保持好奇，刻意学习，每日精进

0 人点赞

从零开发一个电商项目，功能包括电商后台、商品 & SKU 管理、购物车、订单管理、支付宝支付、微信支付、订单退款流程、优惠券等

以构建论坛项目 LaraBBS 为线索，展开对 Laravel 框架的全面学习。应用程序架构思路贴近 Laravel 框架的设计哲学。

koko

9 声望

最佳答案

livewire 组件类中属性不支持分页对象，可以这么实现：

<?php

namespace App\Http\Livewire\Post;

use App\Models\Category;
use App\Models\Post;
use Illuminate\Database\Eloquent\Builder;
use Livewire\Component;
use Livewire\WithPagination;

class PostList extends Component
{
    use WithPagination;

    /**
     * @var Category
     */
    public $category;

    /**
     * @param $categorySlug
     */
    public function mount($categorySlug)
    {
        $this->category = Category::query()->where('slug', $categorySlug)->first();
    }

    /**
     * @return \Illuminate\Contracts\View\Factory|\Illuminate\Contracts\View\View
     */
    public function render()
    {
        $posts = Post::query()
            ->when($this->category, function (Builder $query) {
                $query->where('category_id', $this->category->id);
            })
            ->withCount(['likes'])
            ->orderByDesc('created_at')
            ->paginate(10);

        return view('livewire.post.post-list', compact('posts'));
    }
}

数据集合直接通过render传递到前端页面，前端直接使用：

<div class="bg-white px-4 xl:px-6 divide-y divide-gray-200">
    <div class="py-5 space-y-2 md:space-y-5">
        <p class="text-lg leading-7 text-gray-500 font-bold">{{ $category ? $category->name : '全部分类' }}</p>
    </div>

    <ul class="divide-y divide-gray-200">
        @foreach( $posts as $post )
            <livewire:post.list-item :post="$post" :key="$post->id"/>
        @endforeach
    </ul>

    <div class="py-5 space-y-2 md:space-y-5">
        {{ $posts->links() }}
    </div>
</div>

有别的实现也请大佬们指点

4年前评论

李小明（楼主）

你的答案接近实现，我后来看了很多livewire的视频，发现也很简单都在‘ render’方法中实现！

李小明（楼主）

谢谢你

讨论数量: 5

陈先生

课程读者 650 声望 / PHP_EOL @ NaN

不贴前端页面????

4年前评论

李小明（楼主）

主要是后端分页问题，前段都是最基本的没什么改动！

喝卵形

420 声望

Github 参考实例地址

4年前评论

李小明（楼主）

您的案例我没看明白，请问您可以看下我这个如何修改吗？以及问题处在哪里？谢谢您是使用‘Repositories’没看懂！

mowangjuanzi

Laravel 9.x 译者 258 声望 / PHP工程师 @ null

$this->products = collect($builder->paginate(15)->items())

4年前评论

remx

Laravel 8.x 译者 30 声望

看这个教程即可：www.youtube.com/watch?v=HWTF-oi70e...

4年前评论

koko

9 声望

livewire 组件类中属性不支持分页对象，可以这么实现：

<?php

namespace App\Http\Livewire\Post;

use App\Models\Category;
use App\Models\Post;
use Illuminate\Database\Eloquent\Builder;
use Livewire\Component;
use Livewire\WithPagination;

class PostList extends Component
{
    use WithPagination;

    /**
     * @var Category
     */
    public $category;

    /**
     * @param $categorySlug
     */
    public function mount($categorySlug)
    {
        $this->category = Category::query()->where('slug', $categorySlug)->first();
    }

    /**
     * @return \Illuminate\Contracts\View\Factory|\Illuminate\Contracts\View\View
     */
    public function render()
    {
        $posts = Post::query()
            ->when($this->category, function (Builder $query) {
                $query->where('category_id', $this->category->id);
            })
            ->withCount(['likes'])
            ->orderByDesc('created_at')
            ->paginate(10);

        return view('livewire.post.post-list', compact('posts'));
    }
}

数据集合直接通过render传递到前端页面，前端直接使用：

<div class="bg-white px-4 xl:px-6 divide-y divide-gray-200">
    <div class="py-5 space-y-2 md:space-y-5">
        <p class="text-lg leading-7 text-gray-500 font-bold">{{ $category ? $category->name : '全部分类' }}</p>
    </div>

    <ul class="divide-y divide-gray-200">
        @foreach( $posts as $post )
            <livewire:post.list-item :post="$post" :key="$post->id"/>
        @endforeach
    </ul>

    <div class="py-5 space-y-2 md:space-y-5">
        {{ $posts->links() }}
    </div>
</div>

有别的实现也请大佬们指点

4年前评论

李小明（楼主）

你的答案接近实现，我后来看了很多livewire的视频，发现也很简单都在‘ render’方法中实现！

李小明（楼主）

谢谢你

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容，与人为善，比聪明更重要！

帮助

如何解决Livewire 分页问题？

社区赞助商

关于 LearnKu

资源推荐

服务提供商

其他信息

如何解决Livewire 分页问题？

社区赞助商

关于 LearnKu

资源推荐

服务提供商

其他信息

请登录