Pass data between laravel and vuejs2 component

Question

I have tried this

 <div id="keybrandsapp">
    <profile :userdata="'{!! json_encode($user) !!}'"></profile>
 </div>

NB: $user is passed from the laravel controller when requesting for profile view that is

public function profile(){
    $user = Auth::user();

    return \view('user.profile', compact('user', $user));

 }

In my profile component(vuejs code)

    export default {
    props: ['userdata'],
    mounted() {
        console.dir(this.userdata)

    }
}

But this doesnt pass the user data but prints it on the screen.

How do i pass the userdata from laravel blade to vuejs component.

I'm not a fan of vuejs, how about making a request from vuejs to fetch current user /yourserver.com/user instead of showing the data on page — Emeka Mbah
– Emeka Mbah, Commented Aug 3, 2017 at 8:29
` :userdata="'{!! json_encode($user) !!}'"` why are you putting the single quotes between the double quotes and how about using just :userdata="{{json_encode($user)}} — Merhawi Fissehaye
– Merhawi Fissehaye, Commented Aug 3, 2017 at 8:30
@MerhawiFissehaye I see my stupid mistake now the data is getting passed. — Geoff
– Geoff, Commented Aug 3, 2017 at 8:35

Duy Anh · Accepted Answer · 2017-08-03 08:29:01Z

2

What I suggest is to call the request from the Vuejs template rather than trying to load the data directly into the Html. So the steps will be

Blade loads Vuejs component (at this step you are not getting a user data yet)
component make a request to get user data
component process a returned data

answered Aug 3, 2017 at 8:29

Duy Anh

7801 gold badge7 silver badges27 bronze badges

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

2 Comments

Emeka Mbah Over a year ago

Exactly what I suggested in my comment above. Displaying json object on page is not cool, even if its hidden behind html.

Duy Anh Over a year ago

@Digitlimit while I was typing my answer, this question had 0 comments :) It is, of course, possible to do the way it is stated in a question, however it is not recommended

Collectives™ on Stack Overflow

Pass data between laravel and vuejs2 component

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related