[Vue warn] 的原因是什么：无效的道具：道具 "value" 的自定义验证程序检查失败

Question

我有 nuxt.js 应用程序，它使用 vuejs-datepicker:

<template>
<!-- ... -->

    <DatePicker :value="datePicker.value" />
 <!-- ... -->
 </template>

和一堆日期变量：

<script>
import DatePicker from 'vuejs-datepicker'
import { DateTime } from 'luxon'

const moment = require('moment')

const date = new Date(2016, 8, 16)
const date2 = moment('2016-09-16').toDate()
const date3 = DateTime.local(2016, 9, 16).toJSDate()

export default {
  components: {
    DatePicker
  },
  data() {
    return {
      datePicker: {
        mondayFirst: true,
        format: 'dd.MM.yyyy',
        value: date
      }
    }
  }
}

当我将它的 'value' 属性绑定到通常的日期变量 'date' 时，一切正常，但是当我选择 date2 或 date3 时，我收到这个烦人的警告

[Vue warn]: Invalid prop: custom validator check failed for prop "value".

found in

---> <DatePicker>
       <StaticPositionsTab> at components/StaticPositions.vue
         <BTab>
           <BTabs>
             <Pages/index.vue> at pages/index.vue
               <Nuxt>
                 <Layouts/default.vue> at layouts/default.vue
                   <Root>

我找到了值属性的自定义验证器，它非常简单明了并且 return 在所有三种情况下都是正确的：

value: {
      validator: function (val) { return utils.validateDateInput(val); }
    }

...

validateDateInput (val) {
    return val === null || val instanceof Date || typeof val === 'string' || typeof val === 'number'
  }

但是有什么不同呢？会不会是 Vue.js bug 本身？

Answer 1

date2 和 date3 是对象，而值需要 null |日期 |字符串 |数

const date2 = moment('2016-09-16').toDate()
const date3 = DateTime.local(2016, 9, 16).toJSDate()

typeof date2 // object
typeof date3 // object

您应该使用 .toString() 将它们转换为字符串

const date2 = moment('2016-09-16').toString()
const date2 = moment('2016-09-16').toISOString()
const date3 = DateTime.local(2016, 9, 16).toString()

或使用 unix 时间戳

const date2 = moment('2016-09-16').unix()
const date3 = moment('2016-09-16').valueOf()
const date4 = moment('2016-09-16').getTime()
const date5 = DateTime.local(2016, 9, 16).valueOf()

[Vue warn] 的原因是什么：无效的道具：道具 "value" 的自定义验证程序检查失败

What is the cause of [Vue warn]: Invalid prop: custom validator check failed for prop "value"

vue.js

nuxt.js

vuejs-datepicker