使用计算值设置数据值时出现无效日期错误

Question

I'm creating single page component in Vue which uses date object to initialize date picker. The odd thing is that the value is calculated properly in created() function but wrong in render time of the Vue objects. Now my guess is that in one case the parameter of new Date(milliseconds) is taken as int (which is good) but in second case it is a String, hence 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>
            <v-layout wrap>
              <v-flex xs6>
                <div>Start date: {{ dateToString(startDate) }} <v-btn @click="console.log('start change clicked')">Change</v-btn></div>
              </v-flex>
              <v-flex xs6>
                <div>End date: {{ dateToString(endDate) }} <v-btn @click="console.log('end change clicked')">Change</v-btn></div>
              </v-flex>
              <v-flex xs12>
                <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>
                        <v-card-title
                          class="headline grey lighten-2"
                          primary-title
                        >
                          Privacy Policy
                        </v-card-title>

                        <v-card-text>
                          <v-date-picker v-model="startDatePicked"></v-date-picker>
                        </v-card-text>
                      </v-card>
                    </v-dialog>
              </v-flex>
            </v-layout>
          </v-container>
        </v-card>
      </v-flex>
    </v-layout>
  </v-container>
</template>

<script>
export default {
  name: "GeographicStatistics",
  data() {
    return {
      dialog: false,
      startDate: new Date(this.startDateMs),
      endDate: new Date(Date.now()),
      startDatePicked: new Date(Date.now() - (30 * 24 * 60 * 60 * 1000)).toISOString().substr(0, 10),
      endDatePicked: new Date(Date.now()).toISOString().substr(0, 10)
    };
  },
  computed: {
    startDateMs() {
      console.log("compute start date ms from end date: " + this.endDateMs);
      return this.endDateMs - (30 * 24 * 60 * 60 * 1000);
    },
    endDateMs() {
      console.log("compute start date ms");
      return Date.now();
    }
  },
  methods: {
    dateToString(date) {
      return date.toLocaleString();
    }
  },
  created() {
    console.log("date s: " + this.startDate + ", e: " + this.endDate);
    console.log("calulated date ms: " + new Date(this.startDateMs));
  }
}

</script>

I would expect that my rendered object will have the same value as what I get on the console.

Answer 1

I have found the answer. You are not allowed to use computed fields to initialize data fields. That explanation is enough for me right now to move on because I am a beginner in the JS/Vue.js fields.