Input updating only sometimes/erratically (after cal date chosen)
-
I have a QDate and Qinput tied together by sharing the same v-model, and it looks like this:
<q-input class="dinput" v-model="startdate" borderless dense stack-label label="start date" @input="showApplyButton=true;" mask="datetime"> <template v-slot:prepend> <q-icon name="event" color="grey-6" class="cursor-pointer"> <q-popup-proxy> <q-date minimal v-model="startdate" mask="YYYY/MM/DD" /> </q-popup-proxy> </q-icon> </template> </q-input>
When I select the date on the popup, USUALLY the date displayed in the input will update as well (since they share the same v-model. But sometimes it will not update (even though the vue dev tools show that the value on which it relies HAS in fact always updated.
My v-model is using a computed vuex model that looks like this (following an example from the vuex site):
computed: { startdate: { get () { return date.formatDate(parseInt(this.$store.state.rstruth.data_searchdtstart), 'YYYY/MM/DD') }, set (value) { this.$store.commit('rstruth/searchdtstart', date.formatDate(value, 'x')) } } }
I can’t figure out why it only works most of the time. To summarise the points:
- When selecting the date on the calendar (QDate) popup, the date always shows selected
- Examining dev tools shows the v-model value has ALWAYS changed when new date selected
- Input (QInput) will show the newly selected value about 80% of the time, and 20% not
- There seems to be no pattern for why some dates will show and others not. And sometimes a date will not show when selected, but then show on some later selection of the same date.
Any ideas on how to fix or debug this? Thanks!
-
I think I just stumbled across part of the answer, where the bug (if it is a bug) lies. If I remove the
mask="datetime"
from the QInput, the problem goes away (except that now there is no mask on the input and bad values can possibly be entered. Is there some reason a mask can’t be on both the QDate and the QInput sharing the same v-model?