Vue2中结合vee-validate使用flatpickr首次点击无法选中日期问题

• 配置项存在拼写错误：将flatpickr合法配置maxDate错写为maxData，导致组件内部配置解析异常，首次选值的事件回调被阻断。
• 模板内直接写入内联配置对象：Vue每次重渲染都会生成全新的配置对象引用，触发flatpickr实例反复销毁重建，首次点击时刚好处于实例重初始化阶段，值无法正常写入绑定。
• 事件触发时机冲突：vee-validate的validation-provider默认监听输入事件即时触发校验，和flatpickr首次选值的事件冒泡、DOM更新时机冲突，导致v-model同步流程被打断。

1. 修正配置项拼写错误，将maxData改为maxDate
2. 将flatpickr配置从模板内联写法抽离到组件的data或computed中，保持配置引用稳定，避免组件无意义重初始化
3. 绑定flatpickr原生on-change事件，手动完成值同步与vee-validate校验触发，绕开默认事件时机冲突问题

首先在组件脚本中定义稳定的配置项：

data() {
  return {
    // 其他已有业务数据省略
    startDatePickerConfig: {
      defaultDate: 'today',
      enableTime: true,
      minDate: 'today',
      maxDate: this.formData.autoresponder_end_date,
      dateFormat: 'Z',
      altInput: true
    }
  }
}

模板部分调整为如下实现：

<b-form-group class="requied_field showOnCheck"
    :label="$t('Start On')"
    label-for="v-autoresponder_start_date"
    :description="$t('start_on_desc')">
  <validation-provider
      #default="{ errors, validate }"
      :name="$t('Start On')"
      rules="required">
    <b-input-group class="input-group-merge">
      <b-input-group-prepend is-text>
        <feather-icon icon="CalendarIcon" />
      </b-input-group-prepend>
      <flat-pickr
          v-model="formData.autoresponder_start_date"
          :disabled="isDisabledField"
          class="form-control"
          id="v-autoresponder_start_date"
          :config="startDatePickerConfig"
          @on-change="(_, dateStr) => {
            formData.autoresponder_start_date = dateStr
            validate()
          }"
      />
    </b-input-group>
    <small class="text-danger">{{ errors[0] }}</small>
  </validation-provider>
</b-form-group>

如果业务中结束日期formData.autoresponder_end_date是动态变化的，把配置项从data移到computed中返回即可，只要不在模板中直接写内联对象，就不会触发实例重复销毁重建的问题。如果修复后仍存在偶发选值失效，可以给<flat-pickr>组件追加:wrap="false"属性，关闭flatpickr默认的DOM包装逻辑，避免和BootstrapVue输入组的DOM结构产生冲突。

内容的提问来源于stack exchange，提问作者shaukeen rao