如何阻止带条件判断的Bootstrap日期选择器在编辑时消失？

安全阿岳

2026-7-17

解决方案

你需要引入额外的状态变量来跟踪日期选择器的显示状态，避免因清空日期导致控件直接消失。以下是两种可行的实现方式：

方式一：基于初始预填状态控制显示

只要页面加载时存在预填日期，就始终保持日期选择器可见，允许用户清空后重新输入：

在组件的data中添加状态变量showDatePicker，初始值由预填日期是否存在决定：

data() {
  return {
    preEnteredDate: null, // 从数据库获取的初始日期值
    showDatePicker: false
  };
},
mounted() {
  // 假设此处从后端加载预填日期到preEnteredDate
  // 初始化显示状态：有预填则显示，否则隐藏
  this.showDatePicker = !!this.preEnteredDate;
}

修改模板中的v-if条件，绑定到新的状态变量：

<b-form-row>
  <b-col lg="6">
    <b-form-group v-if="showDatePicker">
      <b-date-picker
        v-model="preEnteredDate"
      />
    </b-form-group>
  </b-col>
</b-form-row>

方式二：基于用户交互状态控制显示

初始时仅当有预填日期才显示；一旦用户点击日期选择器开始交互，就保持控件可见：

添加交互状态变量hasInteracted：

data() {
  return {
    preEnteredDate: null,
    hasInteracted: false
  };
}

给日期选择器添加焦点事件，标记用户已交互：

<b-form-row>
  <b-col lg="6">
    <b-form-group v-if="preEnteredDate || hasInteracted">
      <b-date-picker
        v-model="preEnteredDate"
        @focus="hasInteracted = true"
      />
    </b-form-group>
  </b-col>
</b-form-row>