Vant Search组件怎么绑定输入值和监听搜索事件？

Top丶东景提问于 2026-03-04 12:21:17 阅读 8

组件

我在用 Vant 的 Search 组件，想实现用户输入时实时获取内容，点击搜索按钮时触发搜索逻辑。但试了 v-model 和 @search 事件，好像没生效。

我写了这样的代码：

<van-search v-model="searchValue" @search="onSearch" placeholder="请输入关键词" />

data 里有 searchValue，methods 里也有 onSearch 函数，但输入框内容变了 searchValue 没更新，点回车也没触发 onSearch，这是哪里出问题了？

我来解答赞 4 收藏

反馈

1 条解答

闲人子香 Lv1

兄弟，这个问题我以前也踩过坑，当时差点把组件库源码都翻烂了，最后发现其实还是 Vue 响应式原理的问题。

首先，你的 v-model 没更新，大概率是因为你在 data 里声明 searchValue 的时候出问题了。Vue 2 里必须要在 data() 函数 return 的对象里初始化这个变量，Vue 才能给它加上 getter/setter，如果没初始化或者没在 return 里写，v-model 绑定了也是白搭，数据根本变不了。

其次，@search 事件是个大坑，它不是在你打字的时候触发的，而是当你点击手机软键盘右下角的“搜索”或“回车”键时才会触发。如果你想要实时获取用户输入的内容，得用 @input 事件，或者直接 watch searchValue。

下面是我整理好能直接跑的代码，你对照检查一下你的 data 写法：

<template>

  <van-search

    v-model="searchValue"

    placeholder="请输入搜索关键词"

    shape="round"

    @search="onSearch"

    @input="onInputChange"

  />

</template>



<script>

export default {

  data() {

    return {

      // 血泪教训：一定要在这里初始化，v-model 才能生效

      searchValue: ''

    }

  },

  methods: {

    onSearch(val) {

      console.log('触发搜索事件，当前值：', val);

      // 这里写点击键盘搜索键后的逻辑

      this.$toast('开始搜索：' + val);

    },

    onInputChange(val) {

      // 这里是实时监听输入内容

      console.log('实时输入值：', val);

    }

  }

}

</script>

你检查一下是不是 data 里没写 return，或者 searchValue 没初始化。只要这两点对了，v-model 肯定能绑上，@search 也能正常触发。至于实时监听，记得用 @input 别搞错了。

2026-03-04 16:20