vue+axios实现输入框多条件搜索功能

Vue + Axios 实现输入框多条件搜索功能

在现代的Web开发中，搜索功能是一个非常重要的特性。用户们希望能够根据自己的需求输入多个条件来筛选出所需要的数据。Vue.js是一个流行的JavaScript框架，可以轻松地实现这样的功能。而Axios是一个基于Promise的HTTP库，可以方便地与后端进行数据交互。本文将结合Vue和Axios，介绍如何实现输入框多条件搜索功能。

准备工作

首先，我们需要在项目中安装Vue和Axios。可以通过以下命令来安装：

npm install vue axios

接下来，我们需要在Vue组件中引入Vue和Axios，可以通过以下代码来实现：

import Vue from 'vue'
import axios from 'axios'

Vue.prototype.$axios = axios

实现搜索功能

第一步：创建搜索组件

首先，我们需要创建一个搜索组件，该组件将包含多个输入框，用于输入搜索条件。可以创建一个名为SearchBar.vue的文件，并在该文件中编写以下代码：

<template>
  <div>
    <input v-model="keyword" placeholder="请输入关键字" />
    <input v-model="type" placeholder="请输入类型" />
    <button @click="search">搜索</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      keyword: '',
      type: ''
    }
  },
  methods: {
    search() {
      this.$emit('search', {
        keyword: this.keyword,
        type: this.type
      })
    }
  }
}
</script>

在上述代码中，我们创建了一个包含两个输入框和一个搜索按钮的搜索组件。输入框分别绑定了keyword和type这两个数据属性，用于获取用户输入的关键字和类型。当点击搜索按钮时，调用search方法，并通过$emit方法向父组件发送一个名为search的事件，同时将用户输入的关键字和类型作为参数传递给父组件。

第二步：创建搜索结果组件

接下来，我们需要创建一个搜索结果组件，该组件将用于展示根据搜索条件筛选出的数据。可以创建一个名为SearchResult.vue的文件，并在该文件中编写以下代码：

<template>
  <div>
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.title }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    items: {
      type: Array,
      default: () => []
    }
  }
}
</script>

在上述代码中，我们创建了一个包含一个ul元素的搜索结果组件。通过v-for指令遍历items数组，并将每个元素的title属性显示在列表中。items属性是一个数组类型的属性，用于接收父组件传递过来的搜索结果数据。

第三步：创建父组件

最后，我们需要创建一个父组件，用于管理搜索组件和搜索结果组件。可以创建一个名为App.vue的文件，并在该文件中编写以下代码：

<template>
  <div>
    <search-bar @search="handleSearch"></search-bar>
    <search-result :items="searchResult"></search-result>
  </div>
</template>

<script>
import SearchBar from './SearchBar.vue'
import SearchResult from './SearchResult.vue'

export default {
  components: {
    SearchBar,
    SearchResult
  },
  data() {
    return {
      searchResult: []
    }
  },
  methods: {
    handleSearch({ keyword, type }) {
      this.$axios.get('/api/search', {
        params: {
          keyword,
          type
        }
      })
      .then(response => {
        this.searchResult = response.data
      })
      .catch(error => {
        console.error(error)
      })
    }
  }
}
</script>

在上述代码中，我们在父组件中引入了搜索组件和搜索结果组件，并在模板中使用了这两个组件。当搜索组件触发search事件时，调用handleSearch方法。在handleSearch方法中，使用$axios发送一个GET请求到/api/search接口，并通过params属性传递搜索条件。在请求成功后，将返回