vue.js datepickker不允许更新输入字段的默认值

Question

我在输入字段中使用vue-date-picker作为日期选择器功能，因为它符合我的要求100％。问题是它工作但在加载页面时我从数据库传递一个默认值。但是在我删除v-model属性之前它没有显示我的值。

当我删除此属性时，它没有更新从datepicker日历中选择的日期。

这是我在html使用的代码

<input type="text" id="regular-date" class="form-control w-p100" placeholder="eg. 21 August, 2018" readonly @focus="showRegularDate = true">
<transition name="calendar-fade">
    <date-picker color="#b173f8" :format="formatDate"
                 @close="showRegularDate = false"
                 v-if="showRegularDate"
                 v-model="regularDate"></date-picker>
</transition>

在脚本中我正在使用的格式

<script>
        Vue.use(DatePicker)
        Vue.config.lang = 'en';
        new Vue({
            el: '.app',
            created: function () {
                var today = new Date
                this.minDateLimit = '' + today.getFullYear() + '-' + (today.getMonth() + 1) + '-' + today.getDate()
                this.maxDateLimit = '' + today.getFullYear() + '-' + (today.getMonth() + 1) + '-' + (today.getDate() + 7)
            },
            data: {
                regularDate: '',
                regularDate_2: '',
                regularDate_3: '',
                regularDate_4: '',
                regularDate_5: '',
                showRegularDate: false,
                minDateLimit: '',
                minDate: '',
                showMinDate: false,
                maxDateLimit: '',
                maxDate: '',
                showMaxDate: false,
                rangeDate: '',
                showRangeDate: false,
                specifiedDate: '2016-4-19',
                showSpecifiedDate: false,
                formattedDate: '',
                showFormattedDate: false
            },
            methods: {
                formatDate(date) {
                    return moment(date).format('LLLL');
                },
                formatDate_2: function (date) {
                    return moment(date).format('LLLL');
                },
                formatDate_3: function (date) {
                    return moment(date).format('LLLL');
                },
                formatDate_4: function (date) {
                    return moment(date).format('LLLL');
                },
                formatDate_5: function (date) {
                    return moment(date).format('LLLL');
                }
            }
        })
    </script>

我只是将这个vue用于datepicker。我应该做些什么设置或者我错过了什么？

Answer 1

在模板中，将日期选择器@close事件更改为@close="closeDatePickerPopup"

并在您的方法对象中添加以下方法：

closeDatePickerPopup() {
   this.showRegularDate = false;
   console.log(this.regularDate);
   // here you have access to this.regularDate
   // and you could do whatever you want with this.regularDate
}

如果你想要this.regularDate的初始值，请添加以下代码段：

created:function() {
   // ------------
},
mounted: function () {
   // initialize this.regularDate as follow    
   this.regularDate = "2018-09-08";
},