如何捕获删除输入值的b-form-input事件

Question

我已经尝试过自己并进行了广泛的搜索，以了解如何捕获在“搜索”类型的 b-form-input 中单击 x 图标时触发的事件：

模板：

<b-form-input
    id="filter-input"
    type="search"
    v-model="filter"
    @keydown.enter="onFilterChange(filter)"
    @emptied.native="resetFilter(emptiedEvent)"
/>

脚本：

public resetFilter(event: any) {
  console.log("todo: resetFilter");
}

我尝试了不同的事件处理程序：@emptied、@reset、@close、@cancel、@drop...它们似乎都没有触发。
我错过了什么？ Bootstrap Vue 中可能没有？ docs 没有帮助。
是唯一使用标准@change事件（检查输入值是否被清空）的方法吗？

Answer 1

您不应使用的非标准 search 事件

当您单击x 时，HTML5 search input 确实会发出 非标准 search event，但不幸的是，当您按 Enter 时，它也会发出，所以您必须检查处理程序中的文本值以确定输入是否已清除。

改用input 或change 事件

但我建议使用 input 或 change 代替，如果这适合您的目的，因为来自 MDN 文档的警告：

此功能是非标准的，不在标准轨道上。不要在面向 Web 的生产站点上使用它：它不适用于每个用户。实现之间也可能存在很大的不兼容性，并且行为可能会在未来发生变化。

<b-form-input
    id="filter-input"
    type="search"
    v-model="filter"
    @keydown.enter="onFilterChange(filter)"
    @search="resetFilter"
/>

resetFilter() {
  if(!this.filter) {
    console.log('search cleared')
  }
}

请注意，当您在空输入上按 Enter 时也会触发此操作。