laravel 5.2 — Установка переменной php для компонента vue с помощью реквизита

Question

laravel 5.2 — Установка переменной php для компонента vue с помощью реквизита

Проблемы с настройкой переменной PHP, передаваемой из контроллера Laravel в представление в компоненте VueJS.

Вот код контроллера, который возвращает представление и массив данных.

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 в коде компонента edit-users, что я делаю так.

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 error при попытке сделать текущий метод.

Любые идеи о том, почему я не могу установить переменную PHP для проп компонента Vue?

0

laravel-5.2 php vue-component vuejs2

Решение

Другие решения

Других решений пока нет …

Источник

Accepted Answer

Похоже, вы пытаетесь визуализировать необработанный объект данных и передать его в качестве опоры дочернему компоненту. При привязке значений к атрибутам компонентов 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 на внутреннюю.

1