vue监听输入框异步调用接口
时间: 2024-09-20 19:08:01 浏览: 44
vue实现输入框自动跳转功能
在Vue中监听输入框的异步数据变化并调用接口,通常会使用`v-model`绑定值以及`watch`或`@input`事件结合`axios`或其他HTTP库来实现。这里是一个简单的例子:
```html
<!-- HTML部分 -->
<input type="text" v-model="searchTerm">
<button @click="fetchData">搜索</button>
```
```js
// JavaScript部分 (假设已导入axios)
export default {
data() {
return {
searchTerm: '',
results: []
};
},
methods: {
fetchData() {
this.$http.get('your-api-url', { params: { term: this.searchTerm } })
.then(response => (this.results = response.data))
.catch(error => console.error(error));
}
},
watch: {
searchTerm(newVal, oldVal) {
if (newVal !== oldVal) {
this.fetchData(); // 当输入框内容改变时,触发接口请求
}
}
}
};
```
在这个例子中,当用户在输入框中输入文字并点击“搜索”按钮时,`fetchData`方法会被调用,并将输入的关键词作为参数发送到服务器。如果输入发生变化而没有触发按钮点击,`watch`中的`searchTerm`监听器也会在实时更新时自动触发接口。
阅读全文