2017-01-26 19 views
0

問題:Vue DevToolsから正しくプロペラを渡していて、アクセスしようとすると、ルータービューコンポーネントが必要なデータにアクセスできますテンプレート内の任意のデータプロパティはUncaught TypeError: Cannot read property 'name' of nullとなります。 DevToolsからすべてが有効なオブジェクトであり、プロパティがnullではないので、本当に混乱しています。私Component.vueファイルのビュー2、テンプレート内のプロンプトオブジェクトを参照できません

App.js

const game = new Vue({ 
 
    el: '#game', 
 

 
    data: function() { 
 
     return { 
 
      meta: null, 
 
      empire: null, 
 
      planets: null 
 
     }; 
 
    }, 
 

 
    created:() => { 
 
     axios.get('/api/game').then(function (response) { 
 
      game.meta = response.data.meta; 
 
      game.empire = response.data.empire; 
 
      game.planets = response.data.planets; 
 
     }); 
 
    }, 
 

 
    router // router is in separate file but nothing special 
 
});

main.blade.php

<router-view :meta="meta" :empire="empire" :planets="planets"></router-view> 

スクリプトセクション

export default { 
 
    data: function() { 
 
    return { 
 

 
    } 
 
    }, 
 

 
    props: { 
 
    meta: { 
 
     type: Object 
 
    }, 
 
    empire: { 
 
     type: Object 
 
    }, 
 
    planets: { 
 
     type: Array 
 
    } 
 
    } 
 
}

任意のアイデア?前もって感謝します。

+0

http://imgur.com/a/QbYfB:

{{ meta != null && meta.name }} 

PS:あなたのcreatedフックがあるべきあなたはこのコードを試すことができます。 – TJH

答えて

0

router-viewは、レンダリングを助けることができるview-routerのコンポーネントです。named views。帝国や惑星をあなたのコンポーネントの小道具として渡すことはできません。

あなたのコンポーネントに帝国と惑星を渡すために次のコードのようなものを持っている必要があります:

<my-component :meta="meta" :empire="empire" :planets="planets"></my-component> 

あなたはこのhere周りの詳細を見ることができます。

+0

私は