javascript - Vue.js 日期选择器不允许更新输入字段的默认值

Question

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

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

这是我在 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";
},