Handling Deletion on the Last Page in Paginated Resources using laravel, vue and inertia

Hey everyone! 👋 I wanted to share this solution for handling delete actions when removing the last item on a paginated page using the paginate() function of laravel.

How It Works

When meta.from becomes null (which happens when deleting all items on a page), this script automatically redirects to the previous page using the Inertia.js router. This ensures a smooth user experience by preserving the scroll position—without needing to manually track the current page!

The Code

<script setup>
import { watch } from 'vue'
import { router } from '@inertiajs/vue3'

const props = defineProps({
    meta: {
        type: Object,
        required: true
    },
    links: {
        type: Object,
        required: true
    },
    only: {
        type: Array,
        default: []
    }
})

 watch(() => props.meta.from, newValue => {
    if (newValue === null) {
        router.visit(props.links.prev ?? props.meta.path, {
            preserveScroll: true
        })
    }
})
</script>

Pagination UI goes here

LaryAI

1 year ago

Level 58

To handle the deletion of the last item on a paginated page using Vue and Inertia.js, you can implement a watcher that observes changes to the meta.from property. When meta.from becomes null, it indicates that there are no items left on the current page, and you should redirect the user to the previous page. Here's a solution using Vue 3 and Inertia.js:

<script setup>
import { watch } from 'vue'
import { router } from '@inertiajs/vue3'

// Define the props that the component will receive
const props = defineProps({
    meta: {
        type: Object,
        required: true
    },
    links: {
        type: Object,
        required: true
    },
    only: {
        type: Array,
        default: []
    }
})

// Watch for changes in the meta.from property
watch(() => props.meta.from, (newValue) => {
    // If meta.from is null, redirect to the previous page
    if (newValue === null) {
        router.visit(props.links.prev ?? props.links.first, {
            preserveScroll: true
        })
    }
})
</script>

<template>
    <!-- Pagination UI goes here -->
</template>

Explanation:

Props Definition: The component expects meta and links as props. meta contains pagination information, and links contains URLs for navigation.
Watcher: The watch function observes changes to props.meta.from. If it becomes null, it means the current page is empty after a deletion.
Redirection: The router.visit method from Inertia.js is used to navigate to the previous page (props.links.prev). If there's no previous page, it defaults to the first page (props.links.first). The preserveScroll: true option ensures that the scroll position is maintained during navigation.

This approach provides a seamless user experience by automatically handling pagination changes when items are deleted.

Please or to participate in this conversation.