Блог

Главная - Вопросы по программированию - vuejs получает значение параметра выбора даты после выбора

vuejs получает значение параметра выбора даты после выбора

#javascript #php #laravel #vue.js

#javascript #php #laravel #vue.js

Вопрос:

в vue js я хочу получить результат 2 выбора даты и получить разные дни между ними, но проблема в том, что я хочу сделать это до отправки формы, я имею в виду, когда пользователь выбирает даты, я хочу посчитать дни и указать цену в соответствии с этим. я использую персидский выбор даты, я добавляю его ниже, если это может помочь :

 https://github.com/talkhabi/vue-persian-datetime-picker

и вот моя HTML-разметка :

 <div class="row">
                <div class="col-lg-6">
                    <label>start reserve</label>
                    <date-picker :auto-submit="true" v-model="date" :max="available_end.toString()"
                                 :min="reserve_end.toString()"></date-picker>
                </div>
                <div class="col-lg-6">
                    <label>end reserve</label>
                    <date-picker :auto-submit="true" v-model="date2" :max="available_end.toString()"
                                 :min="reserve_end.toString()"></date-picker>
                </div>
            </div>

и вот часть vuejs :

 data(){
return {
date: '',
date2:'',
}
},
 components: {
        datePicker: VuePersianDatetimePicker
    },

код содержит гораздо больше, поэтому я сократил его для лучшего чтения и
я пытался использовать дату и дату2, но они, похоже, не работают.

Комментарии:

1. Я думаю, вы можете достичь этого, используя вычисляемые свойства. Пожалуйста, добавьте код, который вы пытались сделать до сих пор.

2. я действительно понятия не имею, как получить, я только что попробовал это this.dateDiff = this.value this.$emit(‘input’, this.dateDiff)

Ответ №1:

Вы должны иметь возможность добавлять @change="onChange()" событие в свой инструмент выбора даты. Также, поскольку у вас есть v-model в каждом средстве выбора даты, значения this.date и this.date2 должны быть актуальными в любое время. Затем в onChange функции вы должны иметь возможность получить доступ к this.date и this.date2 и выполнить там вычисление разницы дат.

Если вы добавите одно и то же значение @change="onChange()" в оба средства выбора даты, то вычисление различий в датах будет выполнено при изменении любого из них.

p.s убедитесь, что вы получаете доступ к своим данным с помощью this.propertyname