Vue开发中b-form-datepicker绑定@change事件无响应如何解决

AI 小北

2026-11-3

问题定位

两个日期选择控件触发失效是由两处和组件API不匹配的绑定错误导致的：

最后一个日期选择器错误使用了@on-change="get_data()"的绑定写法。Vue的事件监听规则里，@符号后需要直接拼接组件实际抛出的事件名，不需要额外加on-前缀，这种写法实际是在监听一个名叫on-change的自定义事件，而BootstrapVue的b-form-datepicker从未抛出过该事件，回调自然永远不会执行。
所有带括号的方法绑定写法@change="get_data()"存在执行时机风险：这种写法会在组件初始化阶段就立即执行一次get_data，而非等事件触发后再执行，部分场景下会导致回调逻辑被提前消耗，后续事件触发时无正常响应。

修正步骤

统一替换两个日期选择器的事件绑定，全部使用b-form-datepicker官方支持的change事件，移除错误的on-前缀写法。
调整方法绑定形式，将带括号的立即调用写法改为直接绑定方法引用，保证事件触发时才会执行回调逻辑。

修正后的可运行模板代码

<div class="d-flex flex-row flex-nowrap">
  <b-form-select 
    v-model="region"
    :options="regions"
    class="select_box"
    @change="get_data"
  />
  <b-form-datepicker 
    id="first_day_datepicker"
    v-model="first_day"
    :min="min_day"
    :max="max_day"
    class="mb-2"
    @change="get_data"
  />
  <b-form-datepicker 
    id="last_day_datepicker"
    v-model="last_day"
    :min="min_day"
    :max="max_day"
    class="mb-2"
    @change="get_data"
  />
</div>

常见排查补充

如果修正后仍存在触发失效的问题，可以检查两个点：