vue中搜索页面的实现

搜索页面

api 搜索页面的封装接口api/index.js

//搜索接口
//模糊查询
// /biz/ queryCommodityByName
export function getSousuo(name) {
  return axios.get(`${baseUrl}/biz/queryCommodityByName?name=${name}`)
}

在SearchTop引入的接口

import {getSousuo} from "@/api";

input搜索框里面添加一个v-model="searchKeyWord",双向绑定，绑定一个变量

添加一个返回值，定义用户输入需要搜索的内容和接收搜索到的详情列表

data() {
  return {   //返回
      searchKeyWord: "",//用户输入需要搜索的内容
      sousuos: {}   //接收搜索到的详情列表
  }
},

input搜索框添加一下回车绑定@keydown.enter="mounted"

async回车绑定事件,回车后展现数据

methods: {
  async mounted() {
      let res = await getSousuo(this.searchKeyWord)
      // console.log(res) //数据
      this.sousuos = res.data.data
  }
}