Vuejs v2.0 passes data to component

I built the application on Laravel 5.3 using vue.js and im to go to vue.js to make the pages dynamic. I got everything that works on one page, so I want to convert this to a component, but after that I get the following error:

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

I transferred the data like this:

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);
        });
    }

});

In statistics [] there is where I keep the JSON response from the API and then call them all in my view like this:

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

This works, but when I move on to creating the component, the errors listed above show my new code:

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);
            });
        }
    }
});

What am I doing wrong? Why is my stats [] object now empty when a component tries to access it?

+4
source share
1 answer

stats v-bind, :

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

. homepage props :

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

stats.nxt_today.

, - ? , .

, vue-devtools , .

+9

Source: https://habr.com/ru/post/1663350/


All Articles