当前位置：首页 > VUE

vue表单实现搜索

2026-02-25 18:34:34VUE

实现 Vue 表单搜索功能

在 Vue 中实现表单搜索功能通常涉及数据绑定、事件处理和 API 调用等步骤。以下是具体实现方法：

创建搜索表单组件

<template>
  <div>
    <input 
      v-model="searchQuery" 
      @input="handleSearch" 
      placeholder="输入搜索内容"
    />
    <button @click="resetSearch">重置</button>
  </div>
</template>

数据绑定与事件处理

<script>
export default {
  data() {
    return {
      searchQuery: '',
      timeout: null
    }
  },
  methods: {
    handleSearch() {
      clearTimeout(this.timeout)
      this.timeout = setTimeout(() => {
        this.$emit('search', this.searchQuery)
      }, 500)
    },
    resetSearch() {
      this.searchQuery = ''
      this.$emit('search', '')
    }
  }
}
</script>

在父组件中使用搜索组件

<template>
  <div>
    <search-form @search="performSearch" />
    <ul>
      <li v-for="item in filteredItems" :key="item.id">
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script>
import SearchForm from './SearchForm.vue'

export default {
  components: { SearchForm },
  data() {
    return {
      items: [],
      filteredItems: []
    }
  },
  methods: {
    performSearch(query) {
      if (!query) {
        this.filteredItems = [...this.items]
        return
      }
      this.filteredItems = this.items.filter(item => 
        item.name.toLowerCase().includes(query.toLowerCase())
      )
    },
    async fetchData() {
      const response = await axios.get('/api/items')
      this.items = response.data
      this.filteredItems = response.data
    }
  },
  created() {
    this.fetchData()
  }
}
</script>

使用计算属性优化搜索

computed: {
  filteredItems() {
    return this.items.filter(item => 
      item.name.toLowerCase().includes(this.searchQuery.toLowerCase())
    )
  }
}

添加搜索修饰符

<input 
  v-model.trim="searchQuery" 
  @input.debounce="handleSearch" 
  placeholder="输入搜索内容"
/>

与后端API集成

methods: {
  async performSearch(query) {
    try {
      const response = await axios.get('/api/search', {
        params: { q: query }
      })
      this.filteredItems = response.data
    } catch (error) {
      console.error('搜索失败:', error)
    }
  }
}

样式优化

<style scoped>
input {
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  width: 300px;
}
button {
  margin-left: 10px;
  padding: 8px 16px;
  background-color: #f0f0f0;
  border: 1px solid #ddd;
  border-radius: 4px;
}
</style>

实现多条件搜索

data() {
  return {
    searchParams: {
      name: '',
      category: '',
      priceRange: [0, 1000]
    }
  }
},
methods: {
  buildSearchQuery() {
    const params = {}
    if (this.searchParams.name) params.name = this.searchParams.name
    if (this.searchParams.category) params.category = this.searchParams.category
    params.minPrice = this.searchParams.priceRange[0]
    params.maxPrice = this.searchParams.priceRange[1]
    return params
  },
  async performSearch() {
    const query = this.buildSearchQuery()
    const response = await axios.get('/api/search', { params: query })
    this.filteredItems = response.data
  }
}

以上方法提供了从基础到进阶的Vue表单搜索实现方案，可以根据具体需求选择适合的方式。

vue表单实现搜索