CODEWITHSUNDEEP
phplaravelvuejs2
Geoff
Geoff

Reputation: 6639

Pass data between laravel and vuejs2 component

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.

Upvotes: 0

Views: 233

Answers (1)

Duy Anh
Duy Anh

Reputation: 770

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

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

Upvotes: 2

Related Questions