Trying to wrap my head around when Vue decides to re-render an element.
Let's explore the grid displayed below:
https://i.sstatic.net/DtSQy.png
In this grid, notice that Steve Rogers' total hours have been updated to 9 hours after inputting data for Saturday. However, the total for Saturday remains at 0 hours.
These values are generated by TypeScript getters:
class ScheduledEmployee {
Id: number;
Name: string;
get TotalHours(): number {
let total = 0;
for (let i = 0; i < this.ScheduledDays.length; i++) {
total = total + this.ScheduledDays[i].TotalHours;
}
return total;
}
ScheduledDays: ScheduledDay[] = [];
}
and
class ScheduleDate {
Date: Date;
Id: number; //id is ticks at midnight
Day: string;
ParentSchedulerVM: SchedulerVM;
ScheduledDays: ScheduledDay[] = [];
get TotalHours():number {
let total: number = 0;
for (let i = 0; i++; i < this.ScheduledDays.length) {
total += this.ScheduledDays[i].TotalHours;
}
return total;
}
}
It is acknowledged that this might be stretching the limits of Vue's simple data prop. Nevertheless, it would be helpful to understand why one getter is functioning smoothly while the other is not.