Разбор JSON-закодированных данных в Vue Component

Question

Я передаю json encoded данные на мой Vue component как prop, когда я печатаю всю переменную prop, то это показывает, что данные успешно получены, но я не могу проанализировать данные.

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>

Выход

    {"user_id":2,"first_name":"Shan","last_name":"Biswas","email":"shanpro.2015@gmail.com","phone":"9508168983","created_at":"2019-05-03 05:43:17","updated_at":"2019-05-03 05:43:17"}

    Name:

Answer 1

Обновить файл profile.blade.php до следующего!

@extends('layouts.app')

@section('content')

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

@endsection

Answer 2

Вам необходимо привязать значение к компоненту как динамическое, а не статическое. Так что измените свой блейд-файл на:

@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

В противном случае все значения передаются компоненту в виде простой строки.

Answer 3

Измените это:

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

с этим:

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

Это сработало для меня.