vue.js datepickker не разрешает обновление значения по умолчанию для поля ввода

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>

Я просто использую это значение для выбора даты. Есть ли какие-то настройки, которые я должен сделать, или я что-то упустил?

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";
},