Question

设置从Laravel Controller传递到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组件的prop？

的任何想法

Answer 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是对外部数据的变量引用，内部是用户。

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

1 个答案: