vue查询功能实现

实现 Vue 查询功能

在 Vue 中实现查询功能通常涉及对数据进行筛选和展示。以下是几种常见的方法：

使用计算属性

计算属性可以动态计算并返回筛选后的数据。在组件中定义一个计算属性，根据查询条件过滤数据。

<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>

使用侦听器

如果需要更复杂的查询逻辑，可以使用侦听器来响应查询条件的变化。

<script>
export default {
  data() {
    return {
      searchQuery: '',
      filteredItems: [],
      items: [
        { id: 1, name: 'Apple' },
        { id: 2, name: 'Banana' },
        { id: 3, name: 'Orange' }
      ]
    }
  },
  watch: {
    searchQuery(newVal) {
      this.filteredItems = this.items.filter(item =>
        item.name.toLowerCase().includes(newVal.toLowerCase())
      )
    }
  },
  created() {
    this.filteredItems = this.items
  }
}
</script>

使用第三方库

对于更高级的查询功能，可以使用 Lodash 等第三方库来简化操作。

import _ from 'lodash'

export default {
  data() {
    return {
      searchQuery: '',
      items: [
        { id: 1, name: 'Apple' },
        { id: 2, name: 'Banana' },
        { id: 3, name: 'Orange' }
      ]
    }
  },
  computed: {
    filteredItems() {
      return _.filter(this.items, item =>
        _.includes(item.name.toLowerCase(), this.searchQuery.toLowerCase())
      )
    }
  }
}

结合后端查询

如果数据量较大，可以将查询逻辑放到后端处理，通过 API 请求获取筛选后的数据。

<script>
export default {
  data() {
    return {
      searchQuery: '',
      items: []
    }
  },
  methods: {
    async fetchItems() {
      const response = await fetch(`/api/items?q=${this.searchQuery}`)
      this.items = await response.json()
    }
  },
  watch: {
    searchQuery() {
      this.fetchItems()
    }
  },
  created() {
    this.fetchItems()
  }
}
</script>

使用 Vuex 管理查询状态

在大型应用中，可以使用 Vuex 集中管理查询状态和数据。

// store.js
export default new Vuex.Store({
  state: {
    searchQuery: '',
    items: []
  },
  mutations: {
    setSearchQuery(state, query) {
      state.searchQuery = query
    },
    setItems(state, items) {
      state.items = items
    }
  },
  actions: {
    async fetchItems({ commit, state }) {
      const response = await fetch(`/api/items?q=${state.searchQuery}`)
      commit('setItems', await response.json())
    }
  },
  getters: {
    filteredItems(state) {
      return state.items.filter(item =>
        item.name.toLowerCase().includes(state.searchQuery.toLowerCase())
      )
    }
  }
})

在组件中使用：

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

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

export default {
  computed: {
    ...mapState(['items']),
    ...mapGetters(['filteredItems']),
    searchQuery: {
      get() {
        return this.$store.state.searchQuery
      },
      set(value) {
        this.$store.commit('setSearchQuery', value)
      }
    }
  },
  methods: {
    ...mapActions(['fetchItems']),
    updateSearchQuery() {
      this.fetchItems()
    }
  },
  created() {
    this.fetchItems()
  }
}
</script>

以上方法可以根据具体需求选择适合的实现方式。