ブレードからvueにデータを渡すことができません（Laravel 5.3）

Question

VueコンポーネントをLaravel 5.3で動作させようとしていて、ブレードテンプレートからVueコンポーネントにデータを渡したいとします。

しかし、私はエラーが発生しており、これまでに私が見つけた答えはありません。

私は、新しくインストールされたサンプルコンポーネントを使用しています。私のブレードのテンプレートでは、私が持っている：

<template> 
    <div class="container"> 
     <div class="row"> 
      <div class="col-md-8 col-md-offset-2"> 
       <div class="panel panel-default"> 
        <div class="panel-heading">Example Component</div> 

        <div class="panel-body"> 
         {{testinfo}} I'm an example component! 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</template> 

<script> 
    export default { 
     props: ['testinfo'], 
     mounted() { 
      console.log('Component ready.') 
     } 
    } 
</script> 

Vueのコンポーネントがロードを行いますが、それはtestinfoを表示しません。また、このエラーメッセージを生成します。私のExample.vueで

<example :testinfo="someinfo"></example> 

を私が持っています：

プロパティまたはメソッドsomeinfoはインスタンスでは定義されていませんが、レンダリング中に参照されるのは です。データオプションに無効なデータ プロパティを宣言してください。 プロパティまたはメソッド "someinfo"はインスタンスでは定義されていませんが、レンダリング中に参照されます（ルートインスタンス内にあります）

Answer 1

データオプションで無効なデータプロパティを宣言してください。 （ルートインスタンスにあります）

これはsomeinfoモデルがあなたのvueの親から宣言されていないことを意味します。データ{someinfo：null}にラップしてそこからデータを渡し、コンポーネントの例に渡す必要があります。

については、あなたは、コントローラからあなたの情報を取得するために達成するために、コントローラからsperate AJAX呼び出しを必要とする

Vue new(){ 
data : { someinfo : null }, 
ready :function()/mounted() vue2 
{ 
this.getSomeInfo(); 
} 
methods : { 
    getSomeInfo : function(){ 
    var self = this; 
    your ajax request here then 
    self .someinfo = (your ajax.response) 
    } 
} 
} 

のようなあなたのVUEの方法からAJAXを呼ばなければなりません。 ajax呼び出しが成功した後、vueモデルに応答を送信する時間が過ぎると、双方向バインディングのためにコンポーネントが自動的にコンポーネントに渡されます。

Answer 2

答えはTony Faleでしたが、私が探していたものではありませんでしたが、答えを考える手がかりを与えてくれました。このコードで

：

<example :testinfo="someinfo"></example> 

私は「someinfo」は単なる文字列として扱われるだろうと思ったが、VueがJavaScript変数として扱います。 someinfoはどこにも定義されていないため、エラーが発生します。

代わりにもし私が行います

<example :testinfo="{somekey: 'someinfo'}"></example> 

とにExample.vueを変更します。期待どおりに動作します

<template> 
    <div class="container"> 
     <div class="row"> 
      <div class="col-md-8 col-md-offset-2"> 
       <div class="panel panel-default"> 
        <div class="panel-heading">Example Component</div> 

        <div class="panel-body"> 
         {{testinfo.somekey}} I'm an example component! 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</template> 

。