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

Question

我自己尝试并进行了广泛搜索，以了解如何捕获当您单击 'search' 类型的 b 表单输入中的 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...None好像火了
我错过了什么？ Bootstrap Vue 中可能有 none 吗？ docs 没有帮助。
是否只能使用标准的@change事件（检查输入值是否被清空）？

Answer 1

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

HTML5 search input does emit a non-standard search event 当你点击 x 但不幸的是当你按下 Enter 时它也会发出，所以你将有检查处理程序中的文本值以确定输入是否已清除。

改为使用 input 或 change 事件

但我建议使用 input 或 change，如果这对您的目的有效，因为来自 MDN 文档的警告：

This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

<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')
  }
}

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

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

How to catch the b-form-input event that deletes the input value

forms

events

typescript

vue.js

bootstrap-vue