Vue.js结合Axios实现点击搜索按钮触发GET请求获取API搜索结果

架构老林

2026-9-27

Vue.js点击搜索按钮触发带参GET请求实现方案

1. 调整搜索栏模板代码

你当前的模板缺少搜索按钮，需要补充点击事件绑定，修改后的代码如下：

<div id="app">
  <div class="search-wrapper">
    <input type="text" 
           class="search-bar" 
           v-model="search"
           placeholder="Search in the titles"/>
    <!-- 新增搜索按钮，绑定点击触发搜索方法 -->
    <button @click="handleSearch" class="search-btn">搜索</button>
  </div>
  <!-- 搜索结果展示区域可自行补充 -->
  <div class="result-list" v-if="items.length">
    <div v-for="item in items" :key="item.id">{{ item.title }}</div>
  </div>
</div>

2. 完善Axios请求逻辑与Vue方法

你需要把搜索关键词作为查询参数拼接到请求URL中，让接口直接返回匹配结果，不需要拉取全量数据，完整逻辑如下：

// Vue实例示例代码
new Vue({
  el: '#app',
  data() {
    return {
      search: '',
      items: []
    }
  },
  methods: {
    handleSearch() {
      // 可选：关键词为空时不发起请求，或直接清空现有结果
      if (!this.search.trim()) {
        this.items = []
        return
      }
      // 把搜索关键词编码后作为参数传入接口，示例参数名为search，可根据接口实际要求调整参数名
      axios.get(
        `https://zbeta2.mykuwaitnet.net/backend/en/api/v2/media-center/press-release/?page_size=61&type=5&search=${encodeURIComponent(this.search)}`
      )
      .then((response) => {
        this.items = response.data.results
      })
      .catch(err => {
        console.error('搜索请求失败：', err)
      })
    }
  }
})