Recently, I delved into Vue/Vuex and find myself at a loss with my current code. The method I trigger on click is as follows:
Export (item) {
this.exportObj = {
start: this.dates[0],
end: this.dates[1],
userid: item.id,
};
this.getAllByFilter(this.exportObj);
if (this.dateRangeText == "No dates seleceted") {
this.disValue = true;
} else {
this.disValue = false;
}
if (this.exportData.events.length > 0) {
this.exportData.events = [];
console.log("Emptyed array because there was already data there!");
} else {
console.log("Well this was empty already :O");
}
for (let i = 0; i < this.allEvents.length; i++) {
var timeStart = new Date(this.allEvents[i].start).getHours();
var timeEnd = new Date(this.allEvents[i].end).getHours();
var hourDiff = timeEnd - timeStart;
this.exportData.events[i] = {
start: this.allEvents[i].start,
end: this.allEvents[i].end,
title: this.allEvents[i].title,
userid: this.allEvents[i].userId,
hours: hourDiff,
};
}
this.exportData.title = "Report for " + item.firstName + " " + item.lastName + " for dates in range " + this.dateRangeText;
this.exportData.fileName = item.firstName + " " + item.lastName + " - " + this.dateRangeText;
this.exportData.worksheetName = item.firstName + " " + item.lastName + " " + this.dateRangeText;
},
Despite having fulfilled the promise just once, the array I'm pushing data to (exportData.events) remains empty until I hit the button twice. I utilize a getter for allEvents, and the promise resolution shows that it's successful. As indicated below, the promise resolves on the first click, but the data within the loop fails to populate the empty array. Any insights or suggestions would be greatly appreciated.
https://i.sstatic.net/duJHb.png
Store:
const state = {
events: []
};
const actions = {
getAllByFilter({ commit }, exportObj) {
calendarService.getAllByFilter(exportObj)
.then(
events => commit('getAllSuccess', events),
error => commit('getAllFailure', error)
);
},
};
const getters = {
allEvents: state => state.events
};
const mutations = {
getAllSuccess(state, events) {
state.events = events;
},
};
export const calendar = {
namespaced: true,
state,
actions,
mutations,
getters
};