Why executes a computed function twice? #35
Description
I have a component that collects data from Firebase. The data contains subscriptions (236) of people that subscribe to courses (21) with a specific date.
In a computed property (of the component) I get the unique dates and store them in an array. This array is the base for the v-for in the component. So a list of unique dates is listed (in a panel-group), and every panel shows the subscribers for that particular date.
I console log this computed property (named courseDates) and see that this function is executed twice. Btw, the first time it executes no date is there (yet). In the second cycle it has the data.
Am I doing something wrong here, that it executes twice to collect the data from firebase? Does this sound familiar? Is this a bug? Hope to here from you...
Below the code of the component...
If needed, I can share code via Github repo.
Vue.component('my-subscriptions', {
props: ['display', 'signInStatus'],
data: function () {
return {
title: 'subscriptions',
selectedDate: 0,
filterBy: '',
date: '',
loading: true
}
},
firebase: {
subscriptions: db.ref('subscriptions').orderByChild('date');
},
mounted: function() {
// because loading is cached, set this.loading to true
this.loading = true;
},
events: {},
computed: {
courseDates: function() {
console.log('courseDates'); // get executed twice
var dates = _.sortedUniqBy(this.subscriptions, 'datum'),
datesSorted = [];
// only if there are any dates
if(dates.length>0){
// loop through the dates
dates.forEach(function(data) {
var date = moment(data.date, "DD-MM-YYYY").format('x');
// collect the newly formated dates
if(data.date !== undefined) {
datesSorted.push(date);
}
});
// then sort them on chronologic order
datesSorted.sort(function(a,b) {
return b-a;
});
// finaly, format the dates in a format (DD-MM-YYYY) originally stored
// for queryingitg purpose
var datesFormated = datesSorted.map(function(date) {
var d = moment(date, 'x').format('L');
return d;
});
}
return datesFormated;
},
},
methods: {},
template: `
<div class="panel panel-default" v-for="(date, index) in courseDates">....</div>
`
});