Setting php variable to vue component using props

Question

Having issues with setting a PHP variable passed from a Laravel Controller to a view in a VueJS Component.

Here is the controller code that returns the view and an array of data.

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();
    }
}

I have a Vue instance like this, which has edit-users as a component.

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

I'm trying to access the PHP variable in the edit-users component code, which I'm doing like this.

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

Some other things to note: The $user variable being passed back by the controller is a Cassandra query result object.

I've tried json_encoding the $user variable in the controller and then passing it back.

I've gotten an undefined variable $user error while trying to do the current method.

Any ideas on why I can't set the PHP variable to the Vue component's prop?

Luke Tully · Accepted Answer · 2017-02-20 04:06:21Z

It looks like you're trying to render a raw data object and pass it as a prop to the child component. When binding values to attributes of components, Vue looks for a reference within the Vue instance scope. In this case, your container Vue instance has no reference to that data. Try rendering the data in the global scope (just to test this notion) in a separate variable, then reference that variable from the data object in your Vue instance declaration.

The PHP syntax and template rendering is a bit foreign to me, but using your last code sample I think you'd want to come out with something like the following.

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

For emphasis I've removed the rest of your code that wasn't relevant to the answer. You can see I've referenced a variable outside the scope of the Vue instance in the data object and now you'll be able to render or pass down that reference as you wish.

Here's how you would reference this in the template of the component

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

I changed the name of the reference to that object to emphasise the fact that it would be the name you choose inside the Vue instance that you'd want to use in the template. userData is the variable reference to the data on the outside, user on the inside.

Collectives™ on Stack Overflow

Setting php variable to vue component using props

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related