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.

CodePudding user response：

I would try it like this:

1. private dateTimeRange = [new Date(), new Date()]; --> to remove the more complicated reference stuff through a "proxy" instance variable.

2. 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]}
   }