Laravel 8 + Inertia is not rendering variables

user_14201207 0
Viewed 3335

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>
inertiajs laravel vue.js php javascript
3 Answers

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'])

user_55516850

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.

user_2970150

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

user_112848670
Related