nest and previous pagination inside div - laravel

Question

So, I have created a Laravel controller with pagination. The code inside my Vue file is the following
<div class="flex justify-between flex-wrap">
<div v-for="kink in kinks.data" :key="kink.id" :value="kink.name">
<button type="button" class="m-1 my-2 inline-flex items-center px-3.5 py-2 border border-transparent text-sm leading-4 font-medium rounded-full shadow-sm text-white bg-gray-600 hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500"> {{ kink.name }}</button>
</div>
</div>
<div class="flex justify-between">
<ArrowLeftIcon type="button" :href="kinks.next_page_url" class="m-2 inline-flex items-center px-2 py-1 h-7 rounded-full border border-transparent text-sm leading-4 font-medium shadow-sm text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 "></ArrowLeftIcon>
<ArrowRightIcon type="button" :href="kinks.last_page_url" class="m-2 inline-flex items-center px-2 py-1 h-7 rounded-full border border-transparent text-sm leading-4 font-medium shadow-sm text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500"></ArrowRightIcon>
</div>
The arrow buttons should change the v-for data based on the active page. I have NEVER done this before and I do not want to use some cheap npm package when I just need next and previous.
IDEALLY, if someone is on page 1, and they click previous, it should go to the last page and the same with last page next should go to page 1
How do you implement this?
The data object inside vue from the pagination provides the following:
kinks:Object
current_page:1
data:Array[13]
first_page_url:"http://localhost:8000/kinks?page=1"
from:1
last_page:5
last_page_url:"http://localhost:8000/kinks?page=5"
links:Array[7]
next_page_url:"http://localhost:8000/kinks?page=2"
path:"http://localhost:8000/kinks"
per_page:13
prev_page_url:null
to:13
total:63

Answer 1

ok so you will want to change the way your buttons work then. e.g. add a #click method to them instead of a href
example
<button #click="previousLink">
...icon
</button>
<script>
export default {
methods: {
previousLink() {
if (this.prev_page_url === null) {
window.location.href = this.last_page_url;
} else {
window.location.href = this.prev_page_url;
}
}
}
}
</script>