I have a Date object in my data, and I need to convert the date into a string for a date picker component in Vuetify. The initial date is being read and displayed correctly. I am able to set the date as well - when I set a code breakpoint, I can see the set function for date being executed, and I can observe the dateTime object changing from Vue dev tools. However, the computed date getter does not update - it remains at the initial value. What mistake am I making?
export default {
...
data: function() {
return {
...
dateMenu: false,
dateTime: new Date(),
};
},
computed: {
date: {
get() {
return this.dateTime.toISOString().substr(0, 10);
},
set(val) {
this.dateTime.setFullYear(
val.substr(0, 4),
Number(val.substr(5, 2) - 1),
val.substr(8, 2)
);
}
},
time: {
get() {
return this.dateTime.toISOString().substr(11, 5);
}
}
}
}
<v-menu
v-model="dateMenu"
:close-on-content-click="false"
transition="scale-transition"
offset-y
>
<template v-slot:activator="{ on }">
<v-text-field
v-model="date"
readonly
v-on="on"
></v-text-field>
</template>
<v-date-picker
v-model="date"
@input="dateMenu = false"
></v-date-picker>
</v-menu>