Vuejs error, Invalid prop: type check failed for prop. Expected Date, got Number with value

ILovePHP Published at Dev

135

ILovePHP

I have a very simple code that was supposed to get me started on learning Vue but I somehow still managed to bug it. I have the following code:

export default {
  name: 'my-component',
  data() {
      return {
          model: this.value,
          dateConfig: {
              format: 'DD-MM-YYYY',
              useCurrent: true,
              firstDate: this.minDate,
              secondDate: this.maxDate
          },
      }
  },
  props: {
    firstDate: {type: Date, required: false},
    secondDate: {type: Date, required: false}
  }
}

And after importing this file and trying to use it in another page as follows:

<my-component v-bind:first-date="12-12-2019" v-bind:second-date="31-11-2011"></my-component>

This returns the following two errors:

Invalid prop: type check failed for prop "firstDate". Expected Date, got Number with value -2019.

and

Invalid prop: type check failed for prop "secondDate". Expected Date, got Number with value -1991.

While the first error makes a bit of sense (even though I don't know why it is happening), the second error shocks me as I don't have '1991' anywhere. Could someone please explain to me why this is happening as I adhered to the format the date should be in?

17axaH

This is because you pass in an expression in props javascript. From your example: 11 - 31 - 2011 === -1991.

I recommend reading the documentation for understanding props: https://vuejs.org/v2/guide/components-props.html#Passing-Static-or-Dynamic-Props

You can fix it as follows:

<my-component
  v-bind:first-date="new Date('12-12-2019')"
  v-bind:second-date="new Date('31-11-2011')"
></my-component>

But I would pass the data as a string. But in such cases, do not forget to change the type of the passed parameter in the component. «Date» change to «String».

I hope I helped you.

Collected from the Internet

Please contact [email protected] to delete if infringement.