q-datetime-range with computed getter/setter



  • Hello,

    I’m using Vuex and thus need a computed getter / setter in order to tie a v-model into a q-datetime-range component. However, I’m finding that the get() works but the set(value) is never called.

    I don’t have anything particularly fancy going on in the code:

                  <!-- Time Range -->
                  <q-datetime-range
                    type="time"
                    class="full-width"
                    v-model="timeRange"
                    :min="formDefaults.min"
                    :max="formDefaults.max"
                  ></q-datetime-range>
    

    The definition within computed looks like:

        timeRange: {
          get () {
            return {
              from: this.range.from,
              to: this.range.to
            }
          },
          set (value) {
            console.log('DUUUUUUUUUUUUUUUDE')
          }
        }
    

    The problem is that I never see the “DUUUUUUUUUUUUUUUDE” message printed after updating the values (however it is using the values from the getter).

    I’m currently using a watcher as a work-around but it is less than ideal (I get too many updates in this case).

    Any ideas would be much appreciated!



  • Try this.

        timeRange: {
          get: function () {
            return {
              from: this.range.from,
              to: this.range.to
            }
          },
          set: function (value) {
            console.log('DUUUUUUUUUUUUUUUDE')
          }
        }
    

    Scott



  • Thanks for the idea @s-molinari! I gave it a try but no dice. In both cases it definitely calls the getter, however it never calls the setter. Very strange!



  • So, I thought maybe I could also try using the events to capture the change. I did the following which also never seems to trigger (and I admit my $event knowledge is poor at best):

                  <q-datetime-range
                    type="time"
                    class="full-width"
                    v-model="timeRange"
                    @input="change($event)"
                  ></q-datetime-range>
    

    In this case the change($event) method is never called. I must be doing something very wrong :|



  • So, one more update, I was able to get this to work by “manually” creating a date time-range. Basically I just put two <q-datetime> together with the computed getters / setters and everything is working as expected.

    For reference it was as easy as:

                  <div class="q-datetime-range">
                    <q-datetime
                      v-model="from"
                      type="time"
                    ></q-datetime>
                    <q-datetime
                      v-model="to"
                      type="time"
                    ></q-datetime>
                  </div>
    

    Not sure what’s up with q-datetime-range, not sure if others have it working as expected?


Log in to reply
 

Looks like your connection to Quasar Framework was lost, please wait while we try to reconnect.