Vue 2, Prop-Objekt in Vorlage kann nicht referenziert werden

Question

Problem: Obwohl von den Vue DevTools ich die Prop korrekt übergeben und die Router-View-Komponente hat Zugriff auf die Daten, die es benötigt und im richtigen Format, wann immer ich versuche zuzugreifen Jede der Dateneigenschaften aus der Vorlage bekomme ich Uncaught TypeError: Cannot read property 'name' of null. Es ist wirklich verwirrend, weil von den DevTools alles ein gültiges Objekt ist und die Eigenschaften nicht null sind.

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> 

Skript Abschnitt meiner Component.vue Datei

export default { 
 
    data: function() { 
 
    return { 
 

 
    } 
 
    }, 
 

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

Irgendwelche Ideen? Danke im Voraus.

Answer 1

router-view ist eine Komponente von view-router, die helfen kann, named views zu rendern. Du kannst kein Imperium und keine Planeten an ihn weitergeben, da dies Requisiten deiner Komponente sind.

Sie haben folgende Art von Code haben, Reich und Planeten zu Ihrer Komponente zu übergeben:

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

können Sie weitere Details zu sehen, um diese here.