Laravel Vue Inertia dynamic pagination bugging with mount

Question

I'm using a dynamic query in Laravel Inertia, my pagination is bugging because every time i try to change the pagination the mount() method of vue runs.

 data() {
        return {
            form: this.$inertia.form({
                search: this.filters.search,
                order: "asc",
                column: "code",
                size: 5,
            }),
        };
    },
    mounted() {
        this.$inertia.get(this.route("groups.index"), pickBy(this.form), {
            preserveState: true,
        });
    },
    watch: {
        form: {
            deep: true,
            handler: throttle(function () {
                this.$inertia.get(
                    this.route("groups.index"),
                    pickBy(this.form),
                    { preserveState: true }
                );
            }, 150),
        },
    },

I need the mount() only on the first time or the component get rendered, but I dont want the mount() function to run everytime I use or change my pagination, is there any work around for this?

'groups' => Group::where('company_id', Auth::user()->company_id)
            ->when($request->search, function($query, $term){
                $query->where('code', 'LIKE' , '%' . $term. '%')
                      ->orWhere('name', 'LIKE' , '%' . $term. '%')
                      ->orWhere('description', 'LIKE' , '%' . $term. '%');
            })->when($request->column, function($query, $term) use ($request){
                $query->orderBy($term, $request->order);
            })->paginate($request->size)->withQueryString(),

This is my query.

Answer 1

i'm not sure why state isn't being preserved in your case, i would need to test it.

I handle it slightly differently (example using the composition api)

I don't do a request on mounted, that seems kind of redundant and maybe what's causing your issue, you shouldn't need to filter on mounted as when you are initially mounted it should be your initial request and the user didn't change anything in the fiters yet

// you can also get the current filters from route().params
// current filters coming from the server
const props = defineProps({
    filters: Object,
})

const form = reactive({
    search: props.filters.search,
    order: props.filters.order,
    column: props.filters.column,
    size: props.filters.size,
})

const filter = throttle(function() {
    Inertia.get(route(route().current()), pickBy(form), {
        preserveState: true,
        preserveScroll: true,
    })
}, 150)

watch(form, filter)