vue中搜索功能如何请求数据接口来实现关键字查询

最新推荐文章于 2024-02-02 10:14:46 发布

小周同学:

最新推荐文章于 2024-02-02 10:14:46 发布

阅读量4.4k

点赞数

分类专栏： vue 文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_58495461/article/details/119987053

版权

vue 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

这篇博客介绍了如何在前端实现数据的获取和渲染。通过定义一个空数组保存接口返回的数据，然后在Vue中利用v-for指令遍历渲染搜索关键字。使用防抖函数优化接口请求，监听input输入框的事件，调用车辆搜索接口并更新数据。整个流程展示了前端与后台交互的基本操作。

摘要由CSDN通过智能技术生成

1.在data中定义一个空的数组，这个数组是用来保存从接口中接收到的数据

  AroundList: [], //放搜索列表的数组

2.在页面中渲染， item.tit_con就是查询的关键字

         <div class="keyWord" v-show="cover">
          <div
            class="title"
            @click="Fnsearch(item)"
            v-for="item in AroundList"
            :key="item.id"
          >
            {{ item.tit_con }}
          </div>
        </div>

3.在api中配置接口


//车辆搜索接口
export function searchList(config){
    const params=new URLSearchParams()
    params.append('page',config.page)
    params.append('mod',config.mod)
    return Service({
        url:'/api/oldcar/searchList',
        data:params, 
    })
}

4.在页面中引入接口

import { searchList } from "@/api";

5.并在methods中使用接口，mod分类的关键词就是v-mode绑定的值

    // 接口
    async searchList() {
      return await searchList({ page: this.page, mod: this.val });
    },

6.在input输入框中绑定事件，v-model双向绑定事件传入的值，就是接口mod分类要搜索的关键字， @input="Search"绑定的事件用来监听输入框输入的值

 <input
            type="text"
            placeholder="布加迪威龙"
            @keyup.enter="searchEntInfo"
            v-model="val"
            @input="Search"
          />

7.定义一个防抖事件，用来节约接口多次请求

  time: null, //防抖

8.在inout输入框中定义的监听事件中来执行接口的调用渲染

 async Search() {
      if (this.time) {
        clearTimeout(this.time);
      }
      this.time = setTimeout(async () => {
        this.AroundList = await this.searchList();
        this.AroundList = this.AroundList.splice(0, 8);
      }, 1000);
    },