Javascript 如何使用vue/Quasar进行日期范围验证

我尝试在组件中创建一个带有控件的日期范围

Vue.component('FraisHebergement', {
template: '<div class="q-pt-xs">
            <div class="q-pt-xs row">\
            <template>\
                    <q-input filled v-model="model.date" :rules="ConfirmDateRange" label="Date début" class="td25pc q-pr-xs" ref="dtedeb">\
                        <template v-slot:append>\
                            <q-icon name="event" class="cursor-pointer">\
                                <q-popup-proxy ref="qDateProxy" transition-show="scale" transition-hide="scale">\
                                    <q-date v-model="model.date" mask="DD/MM/YYYY" @input="() => $refs.qDateProxy.hide()" :locale="myLocale"/>\
                                </q-popup-proxy>\
                            </q-icon>\
                        </template>\
                    </q-input >\
                </template ><template>\
                    <q-input filled v-model="model.dateFin" :rules="ConfirmDateRange" label="Date Fin" class="td25pc" ref="dtefin">\
                        <template v-slot:append>\
                            <q-icon name="event" class="cursor-pointer">\
                                <q-popup-proxy ref="qDateProxyf" transition-show="scale" transition-hide="scale">\
                                    <q-date v-model="model.dateFin" mask="DD/MM/YYYY" @input="() => $refs.qDateProxyf.hide()" :locale="myLocale"/>\
                                </q-popup-proxy>\
                            </q-icon>\
                        </template>\
                    </q-input >\
                </template>\
                <q-input input-class="text-right" filled ></q-input >\</div>\
             <q-btn class="q-mt-sm" label="Reset Validation" @click="reset" color="primary"/><div class="row q-pt-xs">   \

        </div></div>',
computed: {
    ConfirmDateRange() {
        return [
            (v) => !!v || "Saisissez quelque chose :-)",
            (v) => regex.test(v) || "Format de date à utiliser: JJ/MM/AAAA",
            (v) => this.model.dateFin > this.model.date || "Date incohérente"
        ]
    }
},
 data: function () {
    return {
        model: {
           date: Quasar.utils.date.formatDate(Date.now(), 'DD/MM/YYYY'), dateFin: ''
        },
        myLocale: {
            days: 'Dimanche_Lundi_Mardi_Mercredi_Jeudi_Vendredi_Samedi'.split('_'),
            daysShort: 'Dim_Lun_Mar_Mer_Jeu_Ven_Sam'.split('_'),
            months: 'Janvier_Fevrier_Mars_Avril_Mai_Juin_Juillet_Aout_Septembre_Octobre_Novembre_Decembre'.split('_'),
            monthsShort: 'Janv_Fevr_Mars_Avr_Mai_Juin_Juil_Aout_Sept_Oct_Nov_Dec'.split('_'),
            firstDayOfWeek: 1
        },
        natures: [],
    }
},
methods: {
    reset() {
        this.$refs.dtedeb.resetValidation(); this.$refs.dtefin.resetValidation()
    }
}
});

Vue.component（'fraishbergement'{
模板：'
\
\
\
\
\
\
\
\
\
\
\
\
\
\
\
\
\
\
\
\
\
\
\\
\
',
计算：{
ConfirmDateRange（）{
返回[
（v） =>！！v | |“塞西塞兹·奎尔克选择了：-”），
（v） =>regex.test（v）| |“使用日期的格式：JJ/MM/AAAA”，
（v） =>this.model.dateFin>this.model.date | | |“收入日期”
]
}
},
数据：函数（）{
返回{
型号：{
日期：Quasar.utils.date.formatDate（date.now（），'DD/MM/YYYY'），dateFin:'
},
myLocale：{
日期：“Dimanche_Lundi_Mardi_Mercredi_Jeudi_Vendredi_Samedi”.拆分（“'），
daysShort:“Dim_Lun_Mar_Mer_Jeu venu Sam”拆分，
月份：“Janvier_Fevrier_Mars_Avril_Mai_Juin_Juillet_Aout_Septemberre_Novenbre_Decemberre”.拆分（“拆分”），
月短：“一月、十月、十一月、十二月”拆分，
星期一：1
},
性质：[]，
}
},
方法：{
重置（）{
this.$refs.dtedeb.resetValidation（）；this.$refs.dtefin.resetValidation（）
}
}
});

所有控件都可以，但我希望使用q-input的resetValidation函数在2个日期和应用规则之后重置错误。因为我放置的startdate大于enddate：startdate上出现错误。但如果我更改了enddate，我的旧错误将保留在startdate。 我按下一个按钮重置。。。但是我想要一个自动系统

---

感谢您的帮助

我认为通过使用

watch

属性，您的问题可以得到解决

watch: {
   model: {
      handler() {
         this.reset();
      },
      deep: true,
   }
}

我不知道是否可以，可以根据您的数据进行调整

deep:true

允许您在对象的其他属性上继承方法

再见

编辑11/12

下面是手表属性的一个示例

---

谢谢，我看不太清楚。我只是从Vue开始。 我找到了另一种更简单的方法。使用规则。 resetValidation是一个返回void的函数，然后我就这样首先调用它

 ConfirmDateRange() {
        return [
            (v) => (this.$refs.dtedeb.resetValidation()|| this.$refs.dtefin.resetValidation() || !!v) || "Saisissez quelque chose :-)",
            (v) => regex.test(v) || "Format de date à utiliser: JJ/MM/AAAA",
            (v) => this.model.dateFin > this.model.date || "Date incohérente"
        ]
    }

现在没事了 希望能帮助别人：-）

目前，有一个开放的，现在我推荐使用