[英]Quasar vue: How do I create a multi-input field as the attached image in quasar vue?
[英]How do a date range validation with 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()
}
}
});
所有控件都可以,但我想使用 q-input 的 resetValidation 函數在 2 個日期和應用規則之后重置錯誤。 因為我把 startdate 比 enddate 大:錯誤出現在 startdate。 但是如果我更改結束日期,我的舊錯誤將保留在開始日期。 我放了一個按鈕來重置...但我想要一個自動系統謝謝你的幫助
我認為通過使用watch
屬性,可以解決您的問題
watch: {
model: {
handler() {
this.reset();
},
deep: true,
}
}
不知道行不行,可以根據你的數據適配
deep: true
允許您從方法繼承對象的其他屬性
https://v2.vuejs.org/v2/guide/computed.html#Watchers
再見
編輯 11/12
這是手表屬性的示例
謝謝,看的不是很清楚。 我只是從 Vue 開始。 我找到了另一種更簡單的方法。 使用規則。 resetValidation 是一個函數 return 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"
]
}
現在可以了希望可以幫助其他人:-)
目前,有一個大問題懸而未決,現在我建議使用vcalendar.io
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.