当前位置：首页 > VUE

vue 实现查询数据

2026-02-22 13:35:16VUE

Vue 实现查询数据的方法

在 Vue 中实现查询数据通常涉及以下几个关键步骤：数据绑定、事件处理和 API 调用。以下是几种常见的实现方式：

使用 v-model 和 computed 实现本地查询

通过 v-model 绑定输入框，结合 computed 计算属性实现本地数据过滤。

<template>
  <div>
    <input v-model="searchQuery" placeholder="Search...">
    <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: 'Apple' },
        { id: 2, name: 'Banana' },
        { id: 3, name: 'Orange' }
      ]
    }
  },
  computed: {
    filteredItems() {
      return this.items.filter(item => 
        item.name.toLowerCase().includes(this.searchQuery.toLowerCase())
      )
    }
  }
}
</script>

使用 axios 调用 API 实现远程查询

通过异步请求获取远程数据，并在用户输入时触发查询。

<template>
  <div>
    <input v-model="searchQuery" @input="fetchData" placeholder="Search...">
    <ul>
      <li v-for="item in searchResults" :key="item.id">
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      searchQuery: '',
      searchResults: [],
      debounceTimer: null
    }
  },
  methods: {
    fetchData() {
      clearTimeout(this.debounceTimer)
      this.debounceTimer = setTimeout(() => {
        axios.get(`/api/items?q=${this.searchQuery}`)
          .then(response => {
            this.searchResults = response.data
          })
      }, 300)
    }
  }
}
</script>

使用 Vuex 管理查询状态

对于大型应用，可以使用 Vuex 集中管理查询状态和逻辑。

// store.js
export default new Vuex.Store({
  state: {
    searchQuery: '',
    searchResults: []
  },
  mutations: {
    SET_SEARCH_QUERY(state, query) {
      state.searchQuery = query
    },
    SET_SEARCH_RESULTS(state, results) {
      state.searchResults = results
    }
  },
  actions: {
    async searchItems({ commit, state }) {
      const response = await axios.get(`/api/items?q=${state.searchQuery}`)
      commit('SET_SEARCH_RESULTS', response.data)
    }
  }
})

<!-- Component.vue -->
<template>
  <div>
    <input :value="searchQuery" @input="updateQuery" placeholder="Search...">
    <ul>
      <li v-for="item in searchResults" :key="item.id">
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'

export default {
  computed: {
    ...mapState(['searchQuery', 'searchResults'])
  },
  methods: {
    ...mapActions(['searchItems']),
    updateQuery(e) {
      this.$store.commit('SET_SEARCH_QUERY', e.target.value)
      this.searchItems()
    }
  }
}
</script>

使用第三方库实现高级搜索功能

对于更复杂的搜索需求，可以考虑使用专门的搜索库如 Fuse.js 或 Elasticsearch。

<template>
  <div>
    <input v-model="searchQuery" placeholder="Search...">
    <ul>
      <li v-for="item in fuseResults" :key="item.id">
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script>
import Fuse from 'fuse.js'

export default {
  data() {
    return {
      searchQuery: '',
      items: [
        { id: 1, name: 'Apple' },
        { id: 2, name: 'Banana' },
        { id: 3, name: 'Orange' }
      ],
      fuse: null
    }
  },
  mounted() {
    this.fuse = new Fuse(this.items, {
      keys: ['name'],
      threshold: 0.3
    })
  },
  computed: {
    fuseResults() {
      return this.searchQuery 
        ? this.fuse.search(this.searchQuery).map(r => r.item)
        : this.items
    }
  }
}
</script>