Buefy timepicker 不清除输入

Question

我有一个项目需要用到 Buefy timepicker。有一个输入包含在选择器中选择的值。一切正常，除了输入元素，如果模型设置为 null，我应该清除它。代码如下所示：

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

还有一些观察者应该从模型变量中获取值，然后将模型变量设置为空。

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;
    }
},

有人能告诉我这段代码有什么问题吗？

Answer 1

看来是时间问题。属性的值尚未传播到 DOM。尝试 $nextTick() 等到下一轮 UI 更新后执行回调。

this.$nextTick(function() {  
  this.newTimeFrom = this.newTimeTo = null;
});

工作演示：

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>

Buefy timepicker 不清除输入

Buefy timepicker does not clear input

watch

timepicker

vue.js

buefy