php変数をvueコンポーネントインスタンスに渡す

Question

変数の値をvueコンポーネントに渡すにはどうすればよいですか？

私の例では、インラインテンプレートクライアントの詳細があります。このビューはlaravelから取得します。したがって、URLに付属のID /client/1を私のvueインスタンスに渡したいと思います。

<client-details inline-template> 
    <div id="client-details" class=""> 
      My HTML stuff 
    </div> 
</client-details> 

とによってマウント：Laravelによってロードされる

私のコンポーネントは、のように見える

Vue.component('client-details', { 
    data(){ 
     return { 
      clientId: null 
     } 
    }, 
); 

私はすでに

:clientId="{{ $client->id }" 

ようにしようとしたが、それは動作しません。 。

Answer 1

マークアップによってVueのコンポーネントに属性を渡すには、Vueのpropsを使用する必要があります。あなたのVueのコンポーネントで

<client-details inline-template client-id="{{ $client->id }}"> 
    <div id="client-details" class=""> 
      My HTML stuff 
    </div> 
</client-details> 

次の例を見てみましょうあなたのVueコンポーネントの他の部分で今

Vue.component('client-details', { 
    props: [ 
     { 
      name: 'clientId', 
      default:0, 
     } 
    ] 
}); 

を、あなたはthis.clientIdとして、この値にアクセスすることができます。

HTMLに我々はケバブ-場合に属性名を書くが、Vueの側に我々はキャメルケースに書き込むことに注意してください。詳細はofficial docs hereです。

Answer 2

私はちょうどこれを行い、それは私のために素晴らしい仕事です。 Laravel 5.4とVue 2.xの使用私の成分で

、オブジェクトの（小道具）プロパティを宣言：コンポーネントがインスタンス化される私のブレードページ

props: ['currentUser'],

：

<my-component v-bind:current-user='{!! Auth::user()->toJson() !!}'></my-component>

注その私はcurrentUserのためにcamelCaseを使用していますが、htmlは大文字と小文字を区別しないので、kebab-case（したがって、 '現在のユーザー'）を使用する必要があります。

また、ブレードの構文{{ }}を使用すると、その間のデータは、htmlspecialcharsで実行されます。あなたがコード化されていないデータを望むなら、{!! !!}

Answer 3

私はVueコンポーネントにいくつかのサーバデータを渡さなければならなかったので、コントローラに変数$server_dataを作成してjsonスクリプトに渡しましたタグ。テンプレートで

$server_data = json_encode([ 
    "some-data" => SomeObject::all() 
]); 

return View::make('myview', compact('server_data')); 

：コントローラで

VUEの初期化で

<script type="application/json" name="server-data"> 
    {{ $server_data }} 
</script> 
<!-- Inserts server data into window.server_data --> 
<script> 
    var json = document.getElementsByName("server-data")[0].innerHTML; 
    var server_data = JSON.parse(json); 
</script> 

、私は計算されたプロパティを置く：

computed: { 
    'server_data': function(){ 
     return window.server_data; 
    } 
} 

そして、データにアクセス可能ですコンポーネントテンプレートでserver_data.some_objectと入力します。