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 ?
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()}`)
}