当前位置：首页 > VUE

vue表单实现搜索

2026-01-12 00:32:32VUE

实现 Vue 表单搜索功能

基础表单绑定 在 Vue 中通过 v-model 实现表单输入与数据的双向绑定，搜索框通常绑定一个字符串类型的数据。

<template>
  <input v-model="searchQuery" placeholder="输入搜索内容">
</template>

<script>
export default {
  data() {
    return {
      searchQuery: ''
    }
  }
}
</script>

处理搜索事件 添加搜索按钮触发搜索方法，或使用 @keyup.enter 监听回车事件。

<template>
  <input 
    v-model="searchQuery" 
    @keyup.enter="handleSearch"
    placeholder="输入搜索内容"
  >
  <button @click="handleSearch">搜索</button>
</template>

<script>
export default {
  methods: {
    handleSearch() {
      console.log('搜索关键词:', this.searchQuery);
      // 调用API或过滤本地数据
    }
  }
}
</script>

本地数据过滤 当数据存储在本地时，可使用 computed 属性实时过滤结果。

<script>
export default {
  data() {
    return {
      searchQuery: '',
      items: ['苹果', '香蕉', '橙子']
    }
  },
  computed: {
    filteredItems() {
      return this.items.filter(item => 
        item.includes(this.searchQuery)
      );
    }
  }
}
</script>

防抖优化 高频输入时通过防抖减少请求次数，使用 Lodash 或自定义实现。

import { debounce } from 'lodash';

export default {
  methods: {
    handleSearch: debounce(function() {
      // 实际搜索逻辑
    }, 500)
  }
}

远程搜索实现 结合 axios 等库调用后端 API，注意处理加载状态和错误。

export default {
  methods: {
    async handleSearch() {
      try {
        const response = await axios.get('/api/search', {
          params: { q: this.searchQuery }
        });
        this.results = response.data;
      } catch (error) {
        console.error('搜索失败:', error);
      }
    }
  }
}

完整组件示例 整合表单、本地过滤和远程搜索的复合示例。

<template>
  <div>
    <input 
      v-model="searchQuery" 
      @keyup.enter="handleSearch"
      placeholder="输入搜索内容"
    >
    <button @click="handleSearch">搜索</button>

    <div v-if="loading">加载中...</div>
    <ul v-else>
      <li v-for="item in results" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      searchQuery: '',
      results: [],
      loading: false
    }
  },
  methods: {
    async handleSearch() {
      this.loading = true;
      try {
        const response = await axios.get('/api/search', {
          params: { q: this.searchQuery }
        });
        this.results = response.data;
      } catch (error) {
        console.error(error);
      } finally {
        this.loading = false;
      }
    }
  }
}
</script>