用户在Bootstrap Vue时间选择器中选择小时后，自动将分钟设置为00

Question

当用户打开时间选择器时，小时和分钟应该为空。一旦他们选择了小时，就会自动将分钟设置为00。提前谢谢。

<b-form-timepicker 
v-model="meditation.start.time"                     
locale="en" 
:state="meditation.start.status"
class="m-1"
now-button
required                    
@input="meditationTimeChange(meditation.start)"
label-close-button="Close"
label-no-time-selected="Start Time"                 
>
</b-form-timepicker>
data() {        
return {
meditation: {
disabled: true,
message: 'Enter Date/Time',
start:
{
time: '',
status: false,
}
meditationTimeChange(id){
if(id.time === ''){
id.status = false;
} else {    
id.status = true;
}
this.meditationValid();
}

Answer 1

您可以通过使用@context事件来完成此操作，每次用户单击其中一个旋转按钮时都会触发该事件。

<b-form-timepicker 
v-model="meditation.start.time"                     
locale="en" 
:state="meditation.start.status"
class="m-1"
now-button
required                    
@context="onContext"
label-close-button="Close"
label-no-time-selected="Start Time"                 
>
</b-form-timepicker>

onContext(ctx) {
if(ctx.hours != null && ctx.minutes == null){
this.meditation.start = `${ctx.hours}:00:00`
}
}