如何解决Livewire 分页问题？

问答 / 306 / 5 / 创建于 3年前

<?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

课程读者 229 声望

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

《L01 基础入门》

我们将带你从零开发一个项目并部署到线上，本课程教授 Web 开发中专业、实用的技能，如 Git 工作流、Laravel Mix 前端工作流等。

《L02 从零构建论坛系统》

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

推荐文章：

更多推荐...

工作小锦囊系列——如何实现一个车辆预定功能（下） 13 / 15 |

高效办公小技巧——如何批量处理 SQL 文件？ 19 / 10 |

失业两个月找存在感系列——几行代码轻松实现laravel链式追踪，一分钟快速排查系统问题 23 / 19 |

Redis 实用小技巧——如何实现一个排行榜功能 24 / 17 |

📙《高并发的哲学原理》开源图书发布十一天 star 数已经破千！ 47 / 16 |

经过代理如何获取真实IP 及 laravel 中配置可信代理的原理 16 / 1 |

koko

8 声望

最佳答案

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>

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

3年前评论

李小明（楼主）

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

李小明（楼主）

谢谢你

讨论数量: 5

陈先生

课程读者 593 声望 / 慢就业指挥官 @ 灵活就业规划中心

不贴前端页面????

3年前评论

李小明（楼主）

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

喝卵形

410 声望

Github 参考实例地址

3年前评论

李小明（楼主）

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

mowangjuanzi

Laravel 9.x 译者 242 声望 / PHP工程师 @ 氪金兽

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

3年前评论

remx

Laravel 8.x 译者 30 声望

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

3年前评论

koko

8 声望

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>

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

3年前评论

李小明（楼主）

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

李小明（楼主）

谢谢你

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

帮助