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

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查看组件中可用的所有对象.