vue 实现查询功能
Vue 实现查询功能的方法
在Vue中实现查询功能通常需要结合数据绑定、事件处理和过滤逻辑。以下是几种常见的实现方式：
基础数据过滤
使用v-model绑定输入框，配合计算属性实现实时过滤：
<template>
<div>
<input v-model="searchQuery" placeholder="搜索...">
<ul>
<li v-for="item in filteredItems" :key="item.id">
{{ item.name }}
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
searchQuery: '',
items: [
{ id: 1, name: '苹果' },
{ id: 2, name: '香蕉' },
{ id: 3, name: '橙子' }
]
}
},
computed: {
filteredItems() {
return this.items.filter(item =>
item.name.toLowerCase().includes(this.searchQuery.toLowerCase())
)
}
}
}
</script>使用watch实现异步查询
当需要从API获取数据时，可以使用watch配合防抖：
<script>
import debounce from 'lodash.debounce'
export default {
data() {
return {
searchQuery: '',
results: [],
isLoading: false
}
},
watch: {
searchQuery: debounce(function(newVal) {
this.fetchResults(newVal)
}, 500)
},
methods: {
async fetchResults(query) {
if (!query) {
this.results = []
return
}
this.isLoading = true
try {
const response = await axios.get('/api/search', { params: { q: query } })
this.results = response.data
} catch (error) {
console.error(error)
} finally {
this.isLoading = false
}
}
}
}
</script>结合Vuex的状态管理
对于大型应用，可以使用Vuex管理搜索状态：
// store/modules/search.js
const actions = {
async search({ commit }, query) {
commit('SET_SEARCH_LOADING', true)
try {
const response = await api.search(query)
commit('SET_SEARCH_RESULTS', response.data)
} catch (error) {
commit('SET_SEARCH_ERROR', error)
} finally {
commit('SET_SEARCH_LOADING', false)
}
}
}使用第三方库实现高级搜索
对于复杂搜索需求，可以集成如Fuse.js等模糊搜索库：
import Fuse from 'fuse.js'
// 在组件中
setup() {
const options = {
keys: ['name', 'description'],
threshold: 0.4
}
const fuse = new Fuse(items, options)
const searchResults = computed(() => {
return searchQuery.value ? fuse.search(searchQuery.value) : items
})
return { searchResults }
}路由参数同步
如果需要保持搜索状态在URL中：
watch: {
'$route.query.q'(newVal) {
this.searchQuery = newVal || ''
},
searchQuery(newVal) {
this.$router.push({
query: { q: newVal || undefined }
})
}
}这些方法可以根据具体需求组合使用，实现从简单到复杂的各种查询功能。关键是根据应用规模和数据量选择合适的实现方式，同时注意性能优化和用户体验。
