Question 363671 in Laravel Question posted in
The official Laravel Documentation can be found here.

Laravel – How to pass a parameter in an Inertia lazy load request?

On the inital page load I am loading specific products, however I want to partially load in missing products based on a foreign key.

For this to work I was thinking about returning two props from my controller in Laravel.
Those two props are ‘products’ and the lazy loading ‘loadedProducts’. ‘loadedProducts’ will load in the products based on the property id.

Here you can see the return of my controller.

return Inertia::render('User/ManageMachine', [
        'products' => $products,
        'loadedProducts' => Inertia::lazy(fn ($propertyId) =>
        StorageProperty::find($propertyId)->products()->toArray()),
    ]);

On my front end I am trying to retrieve the ‘loadedProducts’ like this:

<script setup>
import { router, usePage } from '@inertiajs/vue3';
const fetchProducts = (propertyId) => {
router.reload( { 
        only: [ loadedProducts],
            });
</script>

I haven’t added the propertyId in the fetchProducts function, because I have tried a lot and I wouldn’t know where.

My question for the front-end:
How can I pass the propertyId?

My question for the back-end:
How can I receive the propertyId properly to use it in the lazy loading?

Maybe the most useful question:
Is this even possible?

Thank you in advance,

Thomas

Tags:

2

Answers


  1. 0

    Passing properties to pages using Inertia is not made to do this. What you are trying to do would be best solved using an xhr request. This would allow you to add the parameter to the request, which can in turn use it to return whatever it is that you want to do in the backend.

    Add an API endpoint to handle the request and call it in your Vue component using something like Axios.

    Login or Signup to reply.
  2. 0

    I believe this is possible

    const fetchProducts = (propertyId) => {
    router.visit( { 
            only: [ loadedProducts],
            data: {'propertyId': propertyId},
            preserveScroll: true,
            preserveState: true,
            onSuccess: (page) => {
                //resolve
            },
                });
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search