vue2 DateRangePicker引发TypeError：无法读取未定义的属性'startDate'

Question

我正在尝试实现从https://innologica.github.io/vue2-daterange-picker/#props获得的VUE2 daterangepicker

但是，当用户加载页面时，他在控制台中得到的响应是

  

渲染错误：“ TypeError：无法读取未定义的属性'startDate'”

我通常将链接中的代码复制到如下所示的.vue文件中

<template>
    <div :id="id" :dateRange="dateRange"><label class="typo__label">{{label}}</label>
    <date-range-picker
            ref="picker"
            :opens="opens"
            :locale-data="{ firstDay: 1, format: 'DD-MM-YYYY HH:mm:ss' }"
            :minDate="minDate" :maxDate="maxDate"
            :singleDatePicker="singleDatePicker"
            :timePicker="timePicker"
            :timePicker24Hour="timePicker24Hour"
            :showWeekNumbers="showWeekNumbers"
            :showDropdowns="showDropdowns"
            :autoApply="autoApply"
            v-model="dateRange"
            @update="updateValues"
            @toggle="checkOpen"
            :linkedCalendars="linkedCalendars"
            :dateFormat="dateFormat"
    >
        <div slot="input" slot-scope="picker" style="min-width: 350px;">
            {{ picker.startDate | date }} - {{ picker.endDate | date }}
        </div>
    </date-range-picker>
    </div>  
</template>


<script>
    var moment = require('moment')
    var Vue = require("vue/dist/vue");
    var DateRangePicker = require('vue2-daterange-picker/dist/vue2-daterange-picker.umd.min.js').default
module.exports = {
    components:{ DateRangePicker },
    data: function() {
        return{
            direction: 'ltr',
            format: "DD/MM/YYYY",
            separator: ' - ',
            applyLabel: 'Apply',
            cancelLabel: 'Cancel',
            weekLabel: 'W',
            minDate:moment('2017-12-01'), 
            maxDate:moment('2020-12-01'),
            customRangeLabel: 'Custom Range',
            daysOfWeek: moment.weekdaysMin(),
            monthNames: moment.monthsShort(),
            firstDay: moment.localeData().firstDayOfWeek(),
            dateRange:{ startDate:moment('2018-12-01'), endDate:moment()}
        }
    },
    props:['id','label']
}

在哈巴狗中看起来像这样

date_picker(id="date",label="Date:")