vue如何做到搜索列表中相应的值

最新推荐文章于 2024-04-29 20:22:38 发布

mini74

最新推荐文章于 2024-04-29 20:22:38 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

文章标签： vue

本文链接：https://blog.csdn.net/mini74/article/details/105752944

本文介绍了如何在Vue应用中实现搜索功能，通过双向绑定输入框值，并监听点击事件来获取和显示列表中相应匹配的内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在input上双向绑定data中input框的值

<el-input placeholder="请输入内容" v-model="queryInfo.query">

在input上绑定点击事件，获取页面的数据，并且输出相应的值

<el-button slot="append" icon="el-icon-search" @click="getGoodList"></el-button>

//在methods中
async getGoodList () {
      const { data: res } = await this.$http.get('goods', { params: this.queryInfo })
      if (res.meta.status !== 200) {
        console.log(res.meta.status)
        return this.$message.error('获取商品数据列表失败')
      } else {
        this.goodslist = res.data.goods
        // 获取页面的总页数
        this.total = res.data.total
      }
    },