Tengo un selector de rango de fechas vuetify como se muestra:

 <v-menu ref="effectiveDateMenu" v-model="effectiveDateMenu" :close-on-content-click="false" transition="scale-transition" offset-y max-width="290px" min-width="auto"> <template v-slot:activator="{ on, attrs }"> <v-text-field label="Time Period" v-model="effectiveDateRange" filled dense rounded @*:rules="[v => !!(v && v.length) || 'Rating period is required']"*@ v-bind="attrs" v-on="on" range required :class="toggleEdit ? 'locked' : 'editable'" :readonly="toggleEdit"></v-text-field> </template> <v-date-picker v-model="dates" no-title @@input="datesPicked()" range></v-date-picker> </v-menu>

Luego use la siguiente propiedad calculada para devolver los valores al campo de texto; sin embargo, no puedo obtener las fechas en orden. Solo puede elegir dos fechas y si elige la fecha más nueva primero, completa el campo de texto con ese valor primero, incluso si uso la función de clasificación en el modelo v para el selector de fecha. Cualquier ayuda sería apreciada.

 computed: { effectiveDateRange: function () { // `this` points to the vm instance return this.dates.map((element) => { var d = new Date(element); return `${d.getUTCMonth() + 1}/${d.getUTCDate()}/${d.getUTCFullYear()}`; }).sort(function (a, b) { // Turn your strings into dates, and then subtract them // to get a value that is either negative, positive, or zero. return new Date(b.date) - new Date(a.date); }).join(' - ') } }