q-datetime-range with computed getter/setter

krsyoung

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!

s.molinari

Try this.

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

Scott

krsyoung

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!

krsyoung

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 :|

krsyoung

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?

No More Posting New Topics!

q-datetime-range with computed getter/setter