vue中清空搜索框(input)之后自动刷新(获取)列表

最新推荐文章于 2023-03-20 12:32:22 发布

sing__star

最新推荐文章于 2023-03-20 12:32:22 发布

阅读量4.3k

点赞数 4

分类专栏： vue.js 文章标签：前端 javascript vue.js elementui

本文链接：https://blog.csdn.net/qq_44774831/article/details/115319180

版权

vue.js 专栏收录该内容

36 篇文章

订阅专栏

该博客介绍了在Vue.js中如何为搜索框添加清除功能，以便在用户搜索后能通过点击清除按钮重置搜索并重新加载用户列表。核心代码涉及到`clearable`属性和`@clear`事件，当用户点击清除图标时，调用`findUserByName`方法来更新列表。示例代码展示了包含搜索框和搜索按钮的组件结构。

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

问题场景：我们在搜索框中搜索完某用户(某商品)后，如何搜索框重新刷新用户列表(商品列表)?

解决办法：搜索框中添加一个"x"号，点击重新获取列表

搜索出某用户后
在这里插入图片描述
点击x号清除并重新获取列表

核心代码

// 把事件换成获取列表的事件
clearable @clear="findUserByName(searchName)"

代码示例

  <div class="search" style="text-align:center">
      <span>条件查询</span>
      <el-input v-model="searchName" placeholder="输入搜索值" style="width: 350px" clearable @clear="findUserByName(searchName)">
        <el-button slot="append" icon="el-icon-search" @click="findUserByName(searchName)"></el-button>
      </el-input>
    </div>