Laravel 8 + Inertia is not rendering variables

Question

I actually struggling with passing data into GET request page where I trying to pass data from database to Dashboard.vue component (Using Laravel 8 + Inertia.js stack)

But nothing happened, why?

Controller component:

public function index(Request $request)
{
        return Inertia::render('Dashboard', [
            'percentages' => $percentages = DB::table('profits')->where('user_id', $request->user()->id)->sum('percentage'),
            'profits' => $profits = DB::table('profits')->where('user_id', $request->user()->id)->sum('total_profit'),
            ]);
}

Front-end:

    <div class="container">
                    <div class="row">
                        <div class="col-sm-5 text-center fund-profits">
                          {{profits}}
                        </div>
                        <div class="col-sm-2 text-center nomad-separator">
                            |
                        </div>
                        <div class="col-sm-5 text-center fund-profits">
                          {{percentages}}
                        </div>
                    </div>
   </div>
    
        <script>
            import JetApplicationLogo from './../Jetstream/ApplicationLogo'
        
            export default {
                props: ['percentages', 'profits'],
                components: {
                    JetApplicationLogo,
                },      
            }
        </script>

Answer 1

I had a similar problem yesterday. I was rendering again in routes/web.php via inertia, and I believe there was a overwriting. Try without using inertia in your routes, worked for me.

Route::get('/your_route', [YourController::class, 'index'])

Answer 2

creator of Inertia.js here.

I don't see any issue with what you're doing here, assuming that the Vue component you're showing is in fact the Dashboard.vue page component.

What I'd recommend is using the Vue devtools to inspect the props that being received, to make sure they are coming from the server properly.

Answer 3

in my case the route middleware for inertial was not applied so i applied route middleware inertia and it started working again

server side ineertiajs