I start to use a third party <datetime-picker> component that only accept a Date[] of size 2 as its v-model (for a range of time). In my previous codebase, I maintained 2 separate Date objects, i.e. startTime and endTime, and I hope to stick with that.
// in previous codebase (class-based Vue component)
private startTime = new Date();
private endTime = new Date();
// now I must use an array due to the third-party component...
private dateTimeRange = [this.startTime, this.endTime];
Apparently the following won't work, since the reference itself in the array will be overwritten:
<datetime-picker v-model="dateTimeRange" ... />
I want a clean way to propagate changes (issued by the datetime picker component) to the array back to startTime and endTime object.
I would try it like this:
private dateTimeRange = [new Date(), new Date()]; --> to remove the more complicated reference stuff through a "proxy" instance variable.
Use a computed/property accessor to then receive and render both values:
private get dateRange(): NiceType {
return {start: this.dateTimeRange[0], end: this.dateTimeRange[0]}
}