Question

我使用vue.js在Laravel 5.3上构建了一个应用程序，我开始转移到vue.js以使页面动态化。我把所有东西都放在一个页面上，所以想把它转换成一个组件，但是这样做后我得到了以下错误：

[Vue warn]: Error when rendering component <homepage> at C:\xampp\htdocs\....... 
TypeError: Cannot read property 'nxt_weekly' of undefined

我正在将数据传递给视图：

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

mounted: function () {
    this.fetchEvents();
},

data: {
    loading: true,
    stats: []
},

methods: {
    fetchEvents: function () {
        this.$http.get('home/data').then(function (response) {
            this.stats = response.body;
            this.loading = false;
        }, function (error) {
            console.log(error);
        });
    }

});

在stats []中，我从API中获取JSON响应，然后在我的视图中调用它们，如下所示：

<span class="stat" v-text="'stats.nxt_today'"></span>
....
....

这有效但当我切换到创建组件时，上面列出的错误显示，我的新代码是：

Vue.component('homepage', require('./components/Homepage.vue'),{

    mounted: function () {
        this.fetchEvents();
    },

    data: function () {
        return{
            loading: true,
            stats: []
        }
    },


    methods: {
        fetchEvents: function () {
            console.log('running here');
            this.$http.get('home/data').then(function (response) {
                this.stats = response.body;
                this.loading = false;
            }, function (error) {
                console.log(error);
            });
        }
    }
});

我做错了什么？为什么当组件试图访问它时，我的stats []对象现在是空的？

Answer 1

您需要使用stats将v-bind作为属性传递给组件，如下所示：

<homepage v-bind:stats="stats"></homepage>

以上操作需要在根模板中完成。在homepage组件中，您可以按以下方式在props中收到值：

Vue.component('homepage', {
    props: ["stats"],
    mounted: function () {
        // ...
    },
    // ...
}

在此组件的模板中，您将能够正常访问stats.nxt_today。

顺便问一下，你的统计数据是数组还是对象？您最初将其定义为空数组，但将其作为对象进行访问。

如果仍有问题，可以使用vue-devtools查看组件中的所有可用对象。

vuejs v2.0将数据传递给组件

1 个答案: