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

Question

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

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

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 实例，它有一个组件 edit-users。

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.');
    }
});

我正在尝试访问编辑用户组件代码中的 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 查询结果对象。

我试过 json_encoding 控制器中的 $user 变量，然后将其传回。

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

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

Answer 1

您似乎在尝试渲染原始数据对象并将其作为 prop 传递给子组件。当将值绑定到组件的属性时，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是数据在外面，user在里面的变量引用。

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

Setting php variable to vue component using props

php

laravel-5.2

vue-component

vuejs2