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

Question

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

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 

Некоторые другие вещи, чтобы отметить: переменная $ пользователю передается обратно контроллером является Кассандрой объект результата запроса.

Я пробовал json_encoding переменную $ user в контроллере, а затем передал ее обратно.

У меня есть неопределенная ошибка переменной $ user при попытке выполнить текущий метод.

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

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> 

Я изменил имя ссылки на этот объект, чтобы подчеркнуть тот факт, что это будет имя, которое вы выбираете внутри экземпляра Вью, что вы хотите использовать в шаблоне. userData - это переменная, которая ссылается на данные снаружи, пользователь внутри.