Displayed Time is not reactively bound to v-model / :modelValue

phoenixwong / vue3-timepicker

A dropdown time picker (hour|minute|second) for Vue 3.x, with flexible time format support

MIT License

6 stars 12 forks source link

Displayed Time is not reactively bound to v-model / :modelValue #2

Open robert-jf-close opened 3 years ago

robert-jf-close commented 3 years ago

The "v-model" or :modelValue attributes are not reactively bound to the displayed time.

Example: I create a modal containing a vue-timepicker with:

<td class="column is-full">
                <vue-timepicker
                  min="05:00"
                  max="21:00"
                  required
                  :hour-range="[[5, 21]]"
                  :minute-interval="5"
                  hide-disabled-hours
                  v-model="myObject.time"
                  :modelValue="myObject.time"
                ></vue-timepicker>
              </td>

If I then change the myObject.time value in a method in this file, the time displayed by the time picker is NOT changed.

mansern commented 2 years ago

I have a solution.

Give an ID to timepicker component(timeID)
Set value through: this.time = timeString (this.time is v-model while timeString is the time string sent to the function) setTimeout(() => { document.getElementById("timeID").value = timeString; // to reflect change on the input field }, 0);

The above code snippet will first set the model value and then will reflect the change on the input field (code inside timeout)

urbanskimichal commented 2 years ago

I have the same bug. The easiest solution for me was to add a :key binding like this: <vue-timepicker v-model="value" :key="refresh"></vue-timepicker> refresh value is changing when the value is changed by any methods in component. Changing the :key value remounts the component.

Igor-Lira commented 2 years ago

One way to solve this problem was by adding a modelValue watch in VueTimePicker.vue.

watch: {
 ...
    modelValue(){
      this.readValues();
    },
...
}

Is it possible to add this fix in the repository @phoenixwong ?

KinoKiru commented 1 year ago

I have the same bug. The easiest solution for me was to add a :key binding like this: <vue-timepicker v-model="value" :key="refresh"></vue-timepicker> refresh value is changing when the value is changed by any methods in component. Changing the :key value remounts the component.

THIS WORKED I USED MY V-MODEL AS KEY thx owo <3