laravelvuejs3inertiajs

How in laravel / inertiajs app use pagination component?


On laravel 10 / inertiajs 2 I have list of products :

class HomeController extends Controller
{
    public function index(Request $request)
    {

        return Inertia::render('Home/Index', [
            'products' => ProductResource::collection($products),
            ...
        ]);

and in vue file :

<template>
        <div>
            <Products :products= "products" ></Products>
            ...
        </div>
</template>

<script>
import Products from '@/Pages/Home/Components/Products.vue'
...
export default defineComponent({
    props: {
        products: {
            type: Object,
            required: true,
        },
    },

    name: 'personalProductsList',
    components: {
        ...
    },
    setup(props) {
        let products = ref(props.products.data)
            ...

and in component resources/js/Pages/Home/Components/Products.vue :

<template>
    <div class="mt-6 grid grid-cols-1 gap-x-6 gap-y-10 sm:grid-cols-2 lg:grid-cols-4 xl:gap-x-8 d1">
        <template v-for="product in products" :key="product.id">
            <ProductItem :product="product"></ProductItem>
        </template>
    </div>

    <div class="p-2 frontend_pagination" v-show="showPagination && totalProductsCount > 1">
        <vue-awesome-paginate
            :total-items="totalProductsCount"
            :items-per-page="homeProductsPerPage"
            :max-pages-shown="5"
            v-model="currentPage"
            @click="paginateClick"
        />
    </div>

</template>

<script>
import {router, usePage} from '@inertiajs/vue3';

...
export default defineComponent({
    props: {
        products: {
            type: Object,
            required: true,
        },
    },

    name: 'frontendProductsList',
    // filterCategoryItems
    components: {
        ...
    },
    setup(props) {

        console.log('props::')
        console.log(props)
        let products = ref(props.products)

List of products is shown ok, but how can I use vue-awesome-paginate component ? It has paginateClick method:

function paginateClick(page) {
    console.log('paginateClick page::')
    console.log(page)
    currentPage.value = page
}

But how correctly to open other page binside of this method ? Can I use vue-awesome-paginate component here ?


Solution

  • You could do something like this:

    import {router} from '@inertiajs/vue3'
    
    const paginateClick = (page) => {
        const currentUrl = window.location.pathname;
    
        const query = new URLSearchParams(window.location.search);
    
        query.set('page', page);
    
        router.get(`${currentUrl}?${query.toString()}`)
    }