Vue 2, не может ссылаться на объект Prop в шаблоне

Question

Проблема: хотя из Vue DevTools я правильно прохожу прокрутку, а компонент просмотра маршрутизатора имеет доступ к требуемым данным и в правильном формате, когда я пытаюсь получить доступ любое из свойств данных изнутри шаблона я получаю Uncaught TypeError: Cannot read property 'name' of null. Это действительно запутанно, потому что из DevTools все является допустимым объектом, а свойства не равны нулю.

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> 

сценарий раздел моего Component.vue файла

export default { 
 
    data: function() { 
 
    return { 
 

 
    } 
 
    }, 
 

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

Любые идеи? Заранее спасибо.

Answer 1

router-view является компонентом от view-router которые могут помочь оказать named views. Вы не можете передавать империю и планеты, поскольку они являются реквизитами вашего компонента.

Вы должны иметь следующий вид кода, чтобы пройти империю и планет в компоненте:

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

Вы можете увидеть больше деталей вокруг этого here.