Vueコンポーネント内のオブジェクト内のデータにアクセスできません

Question

userオブジェクト内のデータにアクセスできない理由がわかりません。 channel_idへのアクセス

{ 
    "channel_id": 2, 
    "user": { 
    "id": 1, 
    "name": "Clyde Santiago", 
    "email": "dexterdev02@gmail.com", 
    "created_at": "2017-07-25 08:10:58", 
    "updated_at": "2017-07-25 08:10:58" 
    }, 
    "message": "ssd" 
} 

、user、messageで結構です。しかし、私はuser内のデータにアクセスするとき、それはエラーを示し、

「未定義のプロパティを読み取ることができません 『名前』」

をここにHTMLは私のVueのコンポーネントに

<ul class="list-group"> 
    <li class="list-group-item" v-for="conversation in conversations"> 
    <p> 
     {{conversation.message}} 
    </p> 
    <small>{{conversation.user.name}}</small> // error here 
    </li> 
</ul> 

Answer 1

データが非同期に取り出されるとき、それはすぐにが定義されていません。テンプレートに

conversation.user.name 

を参照しているので、あなたのエラーになりuserが定義されていない時間が、あります。

通常、これはガードで簡単に回避できます。

{{conversation.user && conversation.user.name}} 

Answer 2

です{{conversation.user}}を呼び出すときに使用しているテンプレート言語が文字列を期待しているにもかかわらず、オブジェクトに与えています。だから、テンプレートエンジンは、あなたがそれに渡す「という文字列を」アウトエコーしようとしますが、単に情報がある場合は、この代わりに{{conversation.user.name}}

を試してみて、エラー

..Hence conversation.userをターゲットとする場合、それは文字列でないとき非同期でロードされている場合は、最初にuserオブジェクトが存在するかどうかをチェックする必要があります。だから、それはようなものになるだろうことを行うには：

{{conversation.user && conversation.user.name}} またはここに示されているように、それはこの

{{#if conversation.user}} 
    {{conversation.user.name}} 
{{/if}} 

Answer 3

ようになるハンドルバーのようなもののために、ユーザーがオブジェクトではなく印刷可能な値そのものです。 {{conversation.user.name}}のように個別にプロパティにアクセスしようとしましたか？