Пагинация результатов с помощью Vue.Js / Inertia.js и Laravel

Question

Я пытаюсь разбить данные из Laravel на Vue.Js. Я тоже использую Inertia.js.

В моем контроллере Laravel у меня есть:

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

Это выводит двух моих пользователей подряд во Vue. Я также ожидаю, что объект ссылок будет использоваться для разбивки на страницы. Я не вижу этого в своих реквизитах Vue.

Если я проверю свои реквизиты Vue, у меня будет следующий объект:

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());

в контроллере я вижу:

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, но безуспешно - я сослался на ссылку. Помощь приветствуется.

Answer 1

Казалось бы, разбиение на страницы Laravel по умолчанию не работает с Inertia.JS, поэтому вы должны перейти в свой файл AppServiceProvider.php и добавить следующее, чтобы разбивка на страницы работала.

Это взято из PingCRM

 protected function registerLengthAwarePaginator()
{
    $this->app->bind(LengthAwarePaginator::class, function ($app, $values) {
        return new class(...array_values($values)) extends LengthAwarePaginator {
            public function only(...$attributes)
            {
                return $this->transform(function ($item) use ($attributes) {
                    return $item->only($attributes);
                });
            }

            public function transform($callback)
            {
                $this->items->transform($callback);

                return $this;
            }

            public function toArray()
            {
                return [
                    'data' => $this->items->toArray(),
                    'links' => $this->links(),
                ];
            }

            public function links($view = null, $data = [])
            {
                $this->appends(Request::all());

                $window = UrlWindow::make($this);

                $elements = array_filter([
                    $window['first'],
                    is_array($window['slider']) ? '...' : null,
                    $window['slider'],
                    is_array($window['last']) ? '...' : null,
                    $window['last'],
                ]);

                return Collection::make($elements)->flatMap(function ($item) {
                    if (is_array($item)) {
                        return Collection::make($item)->map(function ($url, $page) {
                            return [
                                'url' => $url,
                                'label' => $page,
                                'active' => $this->currentPage() === $page,
                            ];
                        });
                    } else {
                        return [
                            [
                                'url' => null,
                                'label' => '...',
                                'active' => false,
                            ],
                        ];
                    }
                })->prepend([
                    'url' => $this->previousPageUrl(),
                    'label' => 'Previous',
                    'active' => false,
                ])->push([
                    'url' => $this->nextPageUrl(),
                    'label' => 'Next',
                    'active' => false,
                ]);
            }
        };
    });
}

Answer 2

У меня была аналогичная проблема, и я заметил, что основные ссылки () не будут работать с Inertia и Vue, поэтому я сделал простой компонент Vue, в котором я использую объект Paginator, который я получаю из метода рендеринга Inertia, и он очень хорошо работает для меня без ServiceProvider обходной путь.

Я могу просто использовать

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

как обычно. Затем я привязываю объект paginator к моему компоненту Vue, чтобы я мог использовать его для создания базового компонента Paginator. Таким образом, я могу использовать и повторно использовать <Paginator :paginator="paginator" /> где угодно.

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

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

Я также создал пакет, чтобы вы могли загрузить его через композитор, если хотите. См. Https://github.com/svnwa/InertiaVuePaginator для получения дополнительной информации и папку «Components» для компонента paginator, который я создал. Надеюсь, это поможет другим в будущем :)