Question

问题：虽然从Vue DevTools我正确地传递了prop，并且路由器视图组件可以访问所需的数据并且格式正确，每当我尝试访问模板中的任何数据属性时我得到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的详细信息。

Answer 2

由于您的数据是异步加载，因此当my Component.vue呈现父组件中的数据时可能不存在。因此，您需要检查数据是否已加载。您可以尝试以下代码：

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

PS：你的created钩子应该是：

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

Vue 2，无法在模板中引用Prop对象

2 个答案: