laravel - 在 Vue 组件中解析 JSON 编码的数据

Question

我正在将 json 编码 数据作为 prop 传递到我的 Vue 组件，当我打印整个 prop 变量时，它是显示数据已成功接收，但我无法解析数据。

配置文件.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

您需要将值作为动态而非静态绑定(bind)到组件。 因此，将您的 Blade 文件更改为:

@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

否则所有值都作为简单字符串传递给组件。