javascript - vuejs在选择后获取日期选择器的值

Question

在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
    },

该代码包含更多内容，因此我将其剪掉以便更好地阅读和
我尝试使用 date 和 date2 但它们似乎不起作用。

Answer 1

您应该可以添加 @change="onChange()"事件到您的日期选择器。也因为你有一个 v-model在每个日期选择器上，this.date 的值和 this.date2应始终保持最新。然后在onChange您应该可以访问的功能this.date和 this.date2并在那里执行您的日期差异计算。
如果添加相同的 @change="onChange()"对于两个日期选择器，当它们中的任何一个发生变化时，将执行日期差异的计算。
p.s 确保您使用 this.propertyname 访问您的数据