Currently, I am constructing a single page component utilizing Vue that makes use of a date object to set up the date picker. A peculiar issue I am encountering is that the value is correctly calculated in the created() function but incorrect during the rendering time of the Vue objects. My assumption is that in one scenario, the parameter of new Date(milliseconds) is treated as an integer (which is good), however in the second case it is considered as a String, leading to the "Invalid Date" error.
<template>
<v-container grid-list-md pa-1>
<v-layout fluid>
<v-flex xs12>
<v-card elevation="2">
<v-container fluid grid-list-lg>
....(Additional code truncated for brevity)....
<v-dialog
v-model="dialog"
width="500"
>
<template v-slot:activator="{ on }">
<v-btn
color="blue"
dark
v-on="on"
>
Click Me
</v-btn>
</template>
<v-card>
... (Dialog content omitted for brevity) ...
</v-card>
</v-dialog>
....(Additional layout elements truncated for brevity)....
</v-container>
</v-card>
</v-flex>
</v-layout>
</v-container>
</template>
<script>
export default {
name: "GeographicStatistics",
data() {
...(Data definition and initialization skipped for conciseness)...
},
computed: {
...(Computed properties excluded for brevity)...
},
methods: {
...(Methods section not shown to maintain brevity)...
},
created() {
console.log("date s: " + this.startDate + ", e: " + this.endDate);
console.log("calculated date ms: " + new Date(this.startDateMs));
}
}
</script>
I anticipate that the rendered output will accurately reflect the values displayed in the console.