PHP変数をvueコンポーネントに設定するには

Question

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変数をjson_encodingしてから戻しました。

現在のメソッドを実行しようとしているときに、未定義の変数$ userエラーが発生しました。

なぜ私はVueコンポーネントの小道具にPHP変数を設定できないのですか？

Answer 1

生データオブジェクトをレンダリングして子コンポーネントの小道具として渡そうとしているようです。コンポーネントの属性に値をバインドする場合、VueはVueインスタンススコープ内の参照を探します。この場合、コンテナのVueインスタンスにはそのデータへの参照がありません。この概念をテストするためにグローバルスコープ内のデータを別の変数にレンダリングしてから、その変数をVueインスタンス宣言のデータオブジェクトから参照してみてください。

PHPの構文とテンプレートのレンダリングはちょっと外国人ですが、あなたの最後のコードサンプルを使用すると、次のようなものが出てくると思います。

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

私は、答えに関係のない残りのコードを削除しました。私は、データオブジェクト内のVueインスタンスのスコープ外の変数を参照していることがわかりました。そして、あなたは望むようにその参照をレンダリングまたはパスすることができます。ここで

は、あなたが、私はそれはあなたがVueのインスタンス内選択した名前になるという事実を強調するために、そのオブジェクトへの参照の名前を変更し

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

コンポーネントのテンプレートでこれを参照するだろうかということあなたはテンプレートで使いたいと思うでしょう。 userDataは外部のデータへの変数参照で、内部のユーザーです。