使用Vue.Js/Inertia.js和Laravel进行分页结果 [英] Paginate results with Vue.Js / Inertia.js and Laravel

问题描述

我正在尝试从Vue.Js中的Laravel分页数据.我也在使用Inertia.js.

I'm trying to paginate data from Laravel in Vue.Js. I'm using Inertia.js as well.

在我的Laravel控制器中，我有:

In my Laravel Controller I have:

    $data['participants'] = User::with('groups')->select('id', 'name')->paginate(2);
    return inertia('Dashboard/Participants', $data);

这在Vue中连续输出我的两个用户.我也希望链接对象可用于分页.我在Vue道具中看不到这个.

This outputs my two users in a row well in Vue. I am also expecting the links object to use for pagination. I don't see this in my Vue props.

如果我检查Vue道具，我将拥有以下物品:

If I inspect my Vue props I have the following object:

participants:Object
 current_page:1
 data:Array[2]
 first_page_url:"http://localhost:3000/dashboard/participants?page=1"
 from:1
 last_page:51
 last_page_url:"http://localhost:3000/dashboard/participants?page=51"
 next_page_url:"http://localhost:3000/dashboard/participants?page=2"
 path:"http://localhost:3000/dashboard/participants"
 per_page:2
 prev_page_url:null
 to:2
 total:101

如果我是

dd($data['participants']->links());

在控制器中，我可以看到:

in the controller I can see:

Illuminate\View\View {#316 ▼
  #factory: Illuminate\View\Factory {#310 ▶}
  #engine: Facade\Ignition\Views\Engines\CompilerEngine {#328 ▶}
  #view: "pagination::bootstrap-4"
  #data: array:2 [▶]
  #path: "/Users/ejntaylor/Documents/Laravel/motional/vendor/laravel/framework/src/Illuminate/Pagination/resources/views/bootstrap-4.blade.php"
}

我一直在查看 PingCRM 寻求灵感，但没有运气-我已在链接中引用过.帮助表示赞赏.

I have been looking at PingCRM for inspiration but without luck - I've referenced in the link. Help appreciated.

推荐答案

我遇到了类似的问题，并且注意到基本的links()不适用于Inertia和Vue，所以我制作了一个简单的Vue组件，在其中我使用了Paginator对象我从Inertia渲染方法获得的，如果没有ServiceProvider解决方法，它对我来说效果很好.

I had a similar problem and noticed the basic links() wouldn't work with Inertia and Vue so i made a simple Vue component where I use the Paginator Object I get from the Inertia render method and it works very well for me without the ServiceProvider workaround.

我可以使用

public function index()
{
    return Inertia::render('MyUserList',[
        'paginator' => User::paginate(10)
    ]);
}

像往常一样.然后，我将paginator对象绑定到我的Vue组件，以便可以利用它创建一个基本的Paginator组件.通过这种方式，我可以使用和重用< Paginator:paginator ="paginator"./> 我想要的任何地方.

as I normally would. Then i bind the paginator Object to my Vue Component so I can leverage it to create a basic Paginator component. This way I can use and reuse the <Paginator :paginator="paginator" /> anywhere I want.

<template>
    <Paginator :paginator="paginator" />
</template>

<script>
import Paginator from "@/Components/Paginator";
export default {
    props: {
            paginator: Object
        },
}
</script>

我还创建了一个包，因此您可以根据需要通过作曲家将其拉入.有关更多信息和组件"信息，请参见 https://github.com/svnwa/InertiaVuePaginator .我创建的分页器组件的文件夹.希望以后对其他人有帮助:)

I also created a package so you can pull it in via composer if you want. See https://github.com/svnwa/InertiaVuePaginator for more Info and the "Components" folder for the paginator component i created. I hope it helps others in the future :)

这篇关于使用Vue.Js/Inertia.js和Laravel进行分页结果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！