vue后端获取搜索框数据
时间: 2024-01-14 07:52:10 浏览: 31
您需要使用Vue组件将搜索框数据绑定到后端API中。您可以使用axios库进行HTTP请求,将搜索框数据发送到后端API。
以下是一个简单的示例,使用Vue组件和axios库获取搜索框数据:
```
<template>
<div>
<input type="text" v-model="searchText" @input="search">
<ul>
<li v-for="result in searchResults" :key="result.id">{{ result.name }}</li>
</ul>
</div>
</template>
<script>
import axios from 'axios';
export default {
data() {
return {
searchText: '',
searchResults: []
};
},
methods: {
search() {
axios.get('/api/search', { params: { searchText: this.searchText } })
.then(response => {
this.searchResults = response.data;
})
.catch(error => {
console.log(error);
});
}
}
}
</script>
```
在上面的示例中,searchText绑定到搜索框中的文本输入,@input事件将触发search方法。search方法使用axios库发送HTTP GET请求,将搜索文本作为查询参数传递给后端API。当响应返回时,搜索结果将绑定到searchResults数组中,并用v-for指令在列表中显示。