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?
source
share