I am having problems implementing the gilbertron laravel vue pagination package
I followed the instructions as far as I can tell to implement it, however I am re-learning javascript after 20 years hiatus from development, so I need your assistance.
This is the data I am trying to paginate that is posted using a route & controller in laravel using the paginate() function.
I get this warning when looking at the console to try and troubleshoot the problem.
This is my code I am using in my vue file.
<script setup>
import AppLayout from '@/Layouts/AppLayout.vue';
import { Link } from "@inertiajs/inertia-vue3";
import { TailwindPagination } from 'laravel-vue-pagination';
defineProps({
articles: Object,
});
</script>
<template>
<AppLayout title="Articles">
<template #header>
<h2 class="font-semibold text-xl text-gray-800 leading-tight">
Articles
</h2>
</template>
<div class="py-12">
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
<div class="bg-white overflow-hidden shadow-xl sm:rounded-lg">
<section class="flex md:flex-row m-2 p-2">
<div class="w-11/12">
<div v-if="articles.length > 0">
<div v-for="article in articles.data" :key="article.id">
<!-- Add articles data here -->
</div>
</div>
</div>
<div class="mt-4 p-2">
<TailwindPagination
:data="articles"
@pagination-change-page="getData"
/>
</div>
</section>
</div>
</div>
</div>
</AppLayout>
</template>
Currently the page renders as there is no serious errors that it points too, but the page links don't actually render the new page.
I know the "getData" for the page click property is not correct, but I can't find in the documentation how to correctly implement it, so I was hoping that someone could assist or alternatively point me in the direction of a similar package or tutorial that could teach me how to paginate in vue for laravel paginate() function correctly.
You are missing implementation of getData
method
As per documentation of Vue pagination package
We use the getResults() method to fetch some data from a Laravel application. This method is called when the component is created. The initial data could also be passed as a prop to the component.