vue模糊查询axios的查询button

在Vue中，如果你想实现一个模糊查询功能，并通过axios发送HTTP请求，你可以按照以下步骤操作：

首先，在HTML部分，创建一个输入框用于输入关键字和一个按钮触发搜索：

<template>
  <div>
    <input v-model="searchKeyword" placeholder="请输入查询关键词">
    <button @click="search">搜索</button>
    <!-- 显示搜索结果的地方 -->
    <ul v-for="(item, index) in filteredData" :key="index">
      <li>{{ item.name }}</li>
    </ul>
  </div>
</template>

然后，在你的Vue组件的script部分，引入axios并设置data、methods和计算属性：

<script>
import axios from 'axios';

export default {
  data() {
    return {
      searchKeyword: '',
      searchData: [], // 初始化的数据数组
    };
  },
  methods: {
    async search() {
      const { data } = await axios.get(
        'your-api-url', // 替换为你实际的API地址
        {
          params: {
            keyword: this.searchKeyword,
          },
        }
      );
      
      this.searchData = data; // 将返回的结果赋值给显示数据的变量
    },
  },
  computed: {
    filteredData() {
      return this.searchData.filter(item => {
        return item.name.includes(this.searchKeyword);
      });
    },
  },
};
</script>

在这个例子中，当你点击“搜索”按钮时，会触发`search`方法，该方法向服务器发送GET请求，传入当前的`searchKeyword`作为参数。服务器响应的数据会被存储在`searchData`中，而`filteredData`计算属性则会根据用户输入过滤出包含关键词的数据项。