Laravel + Vue.js - How to pass data from Controller to vue

Question

I am wanting to pass the data from my app controller to my vue:

class AppController extends Controller
{
    /**
     * @param Request $request
     * @return Response
     */
    public function index(Request $request)
    {
        return response()
            ->view('pages.app', ['highScore' => HighScore::getHighScore()], 200);
    }
}

Here is my routes managed in vue:

const routes = [
    {
        path: '/',
        name: 'home',
        component: Home,
        meta: { bodyClass: 'page' },
        props: true
    },
]

Now within my home view I am populating the following within props:

props: ['highScore']

But it is undefined, any help would be appreciated

You can axios to make laravel api calls.

mk23
– mk23

2021-06-25 05:48:10 +00:00
Commented Jun 25, 2021 at 5:48 — mk23
– mk23, Commented Jun 25, 2021 at 5:48
@dev, thanks, I am wanting to reduce the amount of calls

Nick_O
– Nick_O

2021-06-25 06:23:26 +00:00
Commented Jun 25, 2021 at 6:23 — Nick_O
– Nick_O, Commented Jun 25, 2021 at 6:23

JS_LnMstr · Accepted Answer · 2021-06-25 09:19:02Z

2

In the controller you pass the data as usual from controller to a blade view. I use this syntax:

Then, on the Blade View you have to add the VueJs component and pass the same data like this:

Now you can access all those variables on the Vue component.

answered Jun 25, 2021 at 9:19

JS_LnMstr

3781 gold badge7 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Zhiyong Li Jul 9 at 4:12

The correct way to pass those data should be:allbrands="{{$brands}}". Otherwise there will be error, the string rendered from {{$brands}} will reported as undefined by Vue

rivercity · Accepted Answer · 2021-06-25 05:45:13Z

0

In the jetsteam/inertia setup it's done like this:

Route::get('/page4', function () {
    $allusers = ['aa','bb','cc'];
    return Inertia::render('Page4',
        ['users' => $allusers]);
})

If it's a new projet? i recomment this, cause it makes it easier. https://jetstream.laravel.com/2.x/stacks/inertia.html

edited Jun 25, 2021 at 5:45

answered Jun 25, 2021 at 5:21

rivercity

3861 silver badge13 bronze badges

2 Comments

Nick_O Over a year ago

I am aware of that solution but I am extending a current project that does not use Jetstream

rivercity Over a year ago

Check if passing to an normal blade works and check what values for your variables the vue extension for chrome shows.

Collectives™ on Stack Overflow

Laravel + Vue.js - How to pass data from Controller to vue

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related