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

vuejs v2.0 向组件传递数据

vuejs v2.0 pass data to component

javascript

vue.js

vuejs2