I have a project where I need to use Buefy timepicker. There is an input which contains the value selected in the picker. Everything works well except the input element which I thing should be cleared if the model is set to null. The code looks like:
<b-field>
<b-timepicker
v-model="newTimeFrom"
editable
trap-focus
icon="clock"
:incrementMinutes="5"
:placeholder="Set time from"
class="mb-2"
>
</b-timepicker>
<b-timepicker
v-model="newTimeTo"
editable
trap-focus
icon="clock"
:incrementMinutes="5"
:placeholder="Set time to"
class="mb-2"
>
</b-timepicker>
</b-field>
and there are some watchers which should get the value from model variables and then set model variables to null.
data() {
return {
newTimeFrom: null,
newTimeTo: null,
times: [],
};
},
watch: {
newTimeFrom(newTimeFrom) {
if( !this.newTimeTo ) return;
this.times.push([newTimeFrom, this.newTimeTo]);
this.newTimeFrom = this.newTimeTo = null;
},
newTimeTo(newTimeTo) {
if( !this.newTimeFrom ) return;
this.times.push([this.newTimeFrom, newTimeTo]);
this.newTimeFrom = this.newTimeTo = null;
}
},
Can somebody tell me what is wrong with this code?
Looks like there is a timing issue. The value of the properties haven't been propagated to the DOM
. Try $nextTick()
which waits until after the next round of UI updates to execute the callback.
this.$nextTick(function() {
this.newTimeFrom = this.newTimeTo = null;
});
Working Demo :
const example = {
data() {
return {
minutesGranularity: 15,
newTimeFrom: null,
newTimeTo: null,
times: []
}
},
watch: {
newTimeFrom(newTimeFrom) {
if( !this.newTimeTo ) return;
this.times.push([newTimeFrom, this.newTimeTo]);
this.$nextTick(function() {
this.newTimeFrom = this.newTimeTo = null;
});
},
newTimeTo(newTimeTo) {
if( !this.newTimeFrom ) return;
this.times.push([this.newTimeFrom, newTimeTo]);
this.$nextTick(function() {
this.newTimeFrom = this.newTimeTo = null;
});
}
}
}
const app = new Vue(example)
app.$mount('#app')
<script src="https://unpkg.com/vue@2/dist/vue.min.js"></script>
<script src="https://unpkg.com/buefy/dist/buefy.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/buefy/dist/buefy.min.css"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@5.8.55/css/materialdesignicons.min.css"/>
<div id="app" class="container">
<b-field label="Select timepicker">
<b-timepicker
placeholder="Click to select"
icon="clock"
:editable="true"
:incrementMinutes="minutesGranularity"
v-model="newTimeFrom"
>
</b-timepicker>
<b-timepicker
placeholder="Click to select"
icon="clock"
:incrementMinutes="minutesGranularity"
v-model="newTimeTo"
>
</b-timepicker>
</b-field>
</div>