使用 props 将 php 变量设置为 vue 组件答案

【问题标题】：Setting php variable to vue component using props使用 props 将 php 变量设置为 vue 组件
【发布时间】：2017-07-08 11:52:33
【问题描述】：

在设置从 Laravel 控制器传递到 VueJS 组件中的视图的 PHP 变量时遇到问题。

这是返回视图和数据数组的控制器代码。

public function showUser($username)
{
    try {
        $accountSid = Auth::user()->account_sid;
        $user = $this->webrtcUser->retrieveByUsername($accountSid, $username);
        if(count($user)) {
            return view('partials.webrtc.edit_user', $user);
        } else {
            # EDGE CASE: This should never happen, implemented just in case.
            $errorResponse = [
                "Status" => "Error",
                "Data" => "A user with the given username does not exist."
            ];
            return response()->json($errorResponse, 422);
        }
    } catch (Exception $e) {
        $e->getMessage();
    }
}

我有一个像这样的 Vue 实例，它有编辑用户作为一个组件。

const editUser = Vue.component('edit-user', require('./components/pages/webrtc/EditUserPage.vue'))

const usersVue = new Vue({
    el: "#usersVue",
    components: {

        'edit-user': editUser
    },
    data() {
        return {
            userData: {}
        }
    },
    mounted() {
        console.log('Component Ready.');
    }
});

我正在尝试访问 edit-users 组件代码中的 PHP 变量，我正在这样做。

EditUser.vue

<template>
   <div>{{ this.responseData.username }}</div>
</template>

<script>
    export default {
        props: ['responseData'],
        data() {
            return {
                userData: {}
            }
        },
        methods: {

        },
        filters: {
            moment(date) {
                return moment(date).format('dddd, MMMM Do YYYY');
            }
        },
        components: {
        },
        mounted() {
            console.log(this.responseData);
        }
    }
</script>

partials.webrtc.edit_user.blade.php

@extends('layouts.user_layout')

@section('title', 'Edit User')

@section('content')

<edit-user :response-data="{{ json_encode($user) }}"></edit-user>

@endsection

其他需要注意的事项：控制器传回的 $user 变量是一个 Cassandra 查询结果对象。

我已尝试在控制器中对 $user 变量进行 json_encoding，然后将其传回。

我在尝试执行当前方法时遇到未定义变量 $user 错误。

关于为什么我不能将 PHP 变量设置为 Vue 组件的属性的任何想法？

【问题讨论】：

标签： php laravel-5.2 vuejs2 vue-component

【解决方案1】：

看起来您正在尝试渲染原始数据对象并将其作为道具传递给子组件。将值绑定到组件的属性时，Vue 会在 Vue 实例范围内查找引用。在这种情况下，您的容器 Vue 实例没有对该数据的引用。尝试在一个单独的变量中呈现全局范围内的数据（只是为了测试这个概念），然后在 Vue 实例声明中从数据对象中引用该变量。

PHP 语法和模板渲染对我来说有点陌生，但是使用您的最后一个代码示例，我认为您会想要得到类似以下的内容。

const userData = {{ json_encode($user) }};
const usersVue = new Vue({
    data() {
        return {
            user: userData
        }
    },
});

为了强调，我删除了与答案无关的其余代码。您可以看到我在数据对象中引用了 Vue 实例范围之外的变量，现在您可以根据需要呈现或传递该引用。

这是在组件模板中引用它的方式

<edit-user :response-data="user"></edit-user>

我更改了对该对象的引用名称，以强调它是您在 Vue 实例中选择的名称，您希望在模板中使用它。 userData 是外部数据的变量引用，内部是用户。

【讨论】：