Search code examples
laravelpaginationinertiajslaravel-jetstream

page doesn't change when using paginator (Laravel, Inertia.js)

I am using Laravel Jetstream and InertiaJS. I tried to make a pagination according to the manual.

web.php

use App\Models\Post;
use Illuminate\Foundation\Application;
use Illuminate\Support\Facades\Route;
use Inertia\Inertia;

Route::get('/posts', function () {
    return Inertia::render('Posts', [
        'posts' => Post::paginate(2)->through(fn($post) => [
            'id' => $post->id,
            'title' => $post->title,
            'body' => $post->body
        ])
    ]);
})->name('pages.posts');

Posts.vue

<script setup>
import { Link } from '@inertiajs/inertia-vue3';
import NewLayout from '@/Layouts/NewLayout.vue';
defineProps({posts: Object});
</script>

<template>
    <NewLayout title="posts">
        <div>
            <div class="m-10 border w-400" v-for="post in posts.data" :key="post.id">
                <div>{{ post.title }}</div>
                <div>{{ post.body }}</div>
            </div>
        </div>
        <div class="inline-flex -space-x-px">
            <a class="bg-white border border-gray-300 text-gray-500 hover:bg-gray-100 hover:text-gray-700 ml-0 rounded-l-lg leading-tight py-2 px-3 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white" 
            v-for="link in posts.links" :href="link.url" v-html="link.label"></a>
        </div>
    </NewLayout>
</template>

'posts' => Post::paginate(4)

when I change the pagination value to 4 in the web.php file, it shows 4 posts

view

'posts' => Post::paginate(2)

and when I enter the value 2, it displays the first two posts (and so far everything works as it should)

view2

but when i click on the second page nothing changes. the same first two posts are displayed

view3

I don't know what I did wrong. please, help.

I use laravel 9, docker, nginx, mysql

package.json

{
    "private": true,
    "scripts": {
        "dev": "vite",
        "build": "vite build"
    },
    "devDependencies": {
        "@inertiajs/inertia": "^0.11.0",
        "@inertiajs/inertia-vue3": "^0.6.0",
        "@inertiajs/progress": "^0.2.7",
        "@tailwindcss/forms": "^0.5.2",
        "@tailwindcss/typography": "^0.5.2",
        "@vitejs/plugin-vue": "^4.0.0",
        "autoprefixer": "^10.4.7",
        "axios": "^1.1.2",
        "laravel-vite-plugin": "^0.7.2",
        "lodash": "^4.17.19",
        "postcss": "^8.4.14",
        "tailwindcss": "^3.1.0",
        "vite": "^4.0.0",
        "vue": "^3.2.31"
    }
}
Solution

  • I specified in the nginx.conf file like this

    location / {
    try_files $uri /index.php;
  }

    and it was necessary like this

    location / {
    try_files $uri /index.php?$query_string;
  }