vue调接口实现搜索功能

在 Vue 中调用接口实现搜索功能，你需要做的步骤如下：

1. 在组件的 data 中声明一个变量来保存用户输入的搜索关键字，如：

data() {
  return {
    searchKey: ''
  }
},

2. 在组件的 template 中添加一个输入框，并绑定它的 value 属性到 searchKey 变量上，如：

<template>
  <input type="text" v-model="searchKey" />
</template>

3. 在组件中声明一个方法，用来调用搜索接口，如：

methods: {
  search() {
    // 调用搜索接口
  }
},

4. 在 template 中添加一个按钮，绑定它的点击事件到 search 方法上，如：

<template>
  <button @click="search">搜索</button>
</template>

5. 在 search 方法中调用搜索接口，并处理返回的结果。你可以使用 Vue 提供的 $http 服务，或者使用第三方 HTTP 库（如 axios），来调用接口。例如，使用 $http 服务调用接口的代码如下：

search() {
  this.$http.get('/api/search', {
    params: {
      key: this.searchKey
    }
  }).then(response => {
    // 处理返回的结果
  }, response => {
    // 处理错误
  });
},

使用 axios 调用接口的代码如下：

import axios from 'axios';

search() {
  axios.get('/api/search', {
    params: {
      key: this.searchKey
    }
  }).then