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:

    1. When selecting the date on the calendar (QDate) popup, the date always shows selected
    2. Examining dev tools shows the v-model value has ALWAYS changed when new date selected
    3. Input (QInput) will show the newly selected value about 80% of the time, and 20% not
    4. 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 themask="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?


Log in to reply