Parse JSON encoded data in Vue Component

Question

I am passing a json encoded data to my Vue component as a prop, when I am printing the whole prop variable then it is showing that the data has successfully received, but I am not able to parse the data.

profile.blade.php

@extends('layouts.app')

@section('content')

    <my-profile user-details="{{ json_encode($userDetails) }}"></my-profile>

@endsection

MyProfile.vue

<template>
    <div class="container">
        <div class="row justify-content">
            <div class="col-md-3" id="profile-image">
                <img class="img-fluid rounded" src="https://www.w3schools.com/bootstrap4/paris.jpg" alt="Profile Image">
            </div>            
            <div class="col-md-12">
                <p>{{userDetails}}</p>
                <p> Name:  {{ userDetails.first_name }} </p>
            </div>
        </div>
    </div>
</template>

<style>
#profile-image {
margin-bottom: 30px;
}
</style>

<script>
export default {
props: ["userDetails"]
}
</script>

Output

    {"user_id":2,"first_name":"Shan","last_name":"Biswas","email":"[email protected]","phone":"9508168983","created_at":"2019-05-03 05:43:17","updated_at":"2019-05-03 05:43:17"}

    Name:

What you tried for parse data? & where you want this parsed data, show unworkable code — Rejoanul Alam
– Rejoanul Alam, Commented May 3, 2019 at 9:41
Did you try to use json_decode() to get your data in your Vue template ? — Takachi
– Takachi, Commented May 3, 2019 at 9:52
The props userDetails is receiving as an string, I have to convert it using JSON.stringfy(). I am not able to find out how to do — Santanu Biswas
– Santanu Biswas, Commented May 3, 2019 at 9:58

Silencesys · Accepted Answer · 2019-05-03 10:32:18Z

5

You need to bind the value to the component as dynamic and not static. So change your blade file to:

@extends('layouts.app')

@section('content')
    <!-- see the colon in front of the props, that is a shortcut for v-bind:prop-name -->
    <my-profile :user-details="{{ json_encode($userDetails) }}"></my-profile>

@endsection

Otherwise are all values passed to the component as a simple string.

answered May 3, 2019 at 10:32

Silencesys

5655 silver badges13 bronze badges

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

Comments

Cristian Cosenza · Accepted Answer · 2019-05-03 10:01:27Z

1

Change this:

<my-profile user-details="{{ json_encode($userDetails) }}"></my-profile>

with this:

<my-profile user-details='@json($userDetails)'></my-profile>
// Pay attention to single quotes instead of double

This worked for me.

answered May 3, 2019 at 10:01

Cristian Cosenza

2232 silver badges6 bronze badges

1 Comment

Santanu Biswas Over a year ago

Nope, not working.

[Vue warn]: Invalid prop: type check failed for prop "userDetails". Expected Object, got String with value "{"first_name":"Shan","last_name":"Biswas"}".  found in  ---> <MyProfile> at resources/js/components/MyProfile.vue

Akm · Accepted Answer · 2019-05-03 10:23:13Z

0

Update profile.blade.php to following!

@extends('layouts.app')

@section('content')

    <my-profile user-details="{{ $userDetails }}"></my-profile>

@endsection

answered May 3, 2019 at 10:23

Akm

813 bronze badges

Collectives™ on Stack Overflow

Parse JSON encoded data in Vue Component

profile.blade.php

MyProfile.vue

Output

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

profile.blade.php

MyProfile.vue

Output

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related