How disable to select minutes in v-time-picker widget?

问题

In my Vue.js application, I use v-time-picker widget of the Vuetify framework. I want to disable to select minutes. If user select hour, automatically inserted 00 in minutes. How to make it correctly? Right now I set allowed-minutes props but in that case, user needs to select minutes anyway.

<template>
  <v-time-picker
    full-width
    scrollable
    format="24hr"
    :disabled="timePickerDisabled"
    :allowed-minutes="allowedMinutes"
    v-model="selectedTimePickerItems">
  </v-time-picker>
</template>

<script>
export default {
  data () {
    return {
      selectedTimePickerItems: null,
      timePickerDisabled: true
    }
  },
  methods: {
    allowedMinutes: m => m % 60 === 0
  }
}
</script>

回答1:

There is a click event on hour @click:hour. The event emits the current value of timepicker. You can utilize that to set the data.

Codepen: https://codepen.io/aaha/pen/abzEWPE

 <div id="app">
  <v-app>
       <v-menu
        v-model="menu"
        max-width="290px"
        min-width="290px"
      >
        <template v-slot:activator="{ on }">
          <v-text-field
            :value="time"
            label="Picker in menu"
            readonly
            v-on="on"
          ></v-text-field>
        </template>
        <v-time-picker
          v-if="menu"
          :value="time"
          @click:hour="closePicker"
        ></v-time-picker>
      </v-menu>
  </v-app>
</div>

var vApp = new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: {
    time: null,
    menu: false
  },
  methods: {
    closePicker: function(v){
      v = v < 10 ? '0'+v : v;
      this.time = v+":00";
      this.menu = false
    }
  }
})

来源：https://stackoverflow.com/questions/59607056/how-disable-to-select-minutes-in-v-time-picker-widget