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

Posted 2023-02-23

【中文标题】使用 props 将 php 变量设置为 vue 组件

【英文标题】：Setting php variable to vue component using props

【发布时间】：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 组件的属性的任何想法？

【参考方案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 是外部数据的变量引用，内部是用户。