VueJs-如何在用户完成类型时调用HTTP request

Question

我有这个输入框：

<b-row>
<b-col md="3"
v-for="(header, index) in columns"
:key="index"
>
<b-form-group>
<b-form-input
placeholder="Search"
type="text"
class="d-inline-block"
@input="advanceSearch($event, header.field)"
/>
</b-form-group>                            
</b-col>
</b-row>

当用户键入内容时，我将输入存储到searchString:

advanceSearch(e, field) { 
this.searchString.push({
[field] : e
});
// http.post().then().catch(); // my http call
},

我想在用户完成键入时调用http请求。但似乎并不是每一个键都很强，它称之为HTTP。

VUE JS中有什么方法吗？

Answer 1

看起来您希望在空闲键入时和用户集中注意力时都触发该函数。

而非焦点输入会触发事件change，因此使用起来应该很简单。您还可以实现去抖动，相当于以下内容：

export default {
advanceSearch(e, field) { /* ... */ },
// create a custom debounced search
debouncedSearch(...args) {
clearTimeout(this.debounceTimeout); // if we set a previous debounce timeout, don't fire it
this.debounceTimeout = setTimeout(
// we need to bind a custom `this` value because setTimeout binds `window` by default:
e => this.advanceSearch.apply(this, args),
500 // debounce time
);
},
// ...
}

对于Vue代码，输入应该如下所示。请注意，change侦听器是如何添加到组件中的，并且input处理程序调用debounce函数而不是直接调用。

<b-form-input
placeholder="Search"
type="text"
class="d-inline-block"
@input="debouncedSearch($event, header.field)"
@change="advanceSearch($event, header.field)"
/>

这个代码的本质是，当用户键入然后点击输入框("blur"(时，HTTP请求将启动，或者当用户暂停键入半秒钟(可以随意更改此值(时，请求也将发送。