Vant ActionSheet怎么绑定点击事件？

设计师锦灏提问于 2026-02-25 10:27:17 阅读 15

组件

我在用 Vant 的 ActionSheet 做一个底部弹出菜单，但点了选项后没反应。文档里说用 @select，但我试了好像没触发，控制台也没报错。是不是我写法有问题？

这是我的代码：

<van-action-sheet
  v-model:show="showActionSheet"
  :actions="actions"
  @select="onSelect"
/>

methods 里写了 onSelect 函数，也确认 actions 是 { name: ‘xxx’ } 这种格式，但就是不进函数，求问哪里错了？

Vant

我来解答赞 6 收藏

反馈

1 条解答

Code°玉研 Lv1

你这代码看着没问题，但大概率是 Vant 版本问题——@select 是 Vant 4 的写法，如果你用的是 Vant 3，它压根没有这个事件，得用 @click-action 才对。

先确认下你装的 Vant 版本：npm list vant 或看 package.json，如果是 3.x，那就得改事件名。

Vant 3 的正确写法是：

<van-action-sheet

  v-model:show="showActionSheet"

  :actions="actions"

  @click-action="onSelect"

/>

而且 actions 的每个项得是对象，比如 { name: '选项1', subname: '副标题' }，但你写了 { name: 'xxx' } 也够用，没问题。

再检查下 onSelect 函数有没有写在 methods 里，别写成 setup 或 computed 里了（除非你用的是 Composition API，但你这语法明显是 Options API）。

要是确认版本是对的（Vant 4+），那可能是 showActionSheet 或 actions 初始化时是 undefined 导致组件根本没渲染出来——你打开浏览器 DevTools，看下 DOM 里有没有 van-action-sheet 的节点，或者加个 console.log('rendered') 看组件是否挂载成功。

要是还是没反应，直接在 onSelect 里加个 alert('hit') 或 console.error，别光靠 console.log，有时候浏览器控制台过滤了 info 级别日志，但 error 会显示。

顺便一提，Vant 的事件名容易记混，select 和 click-action 差一个版本，真坑。

2026-02-25 11:02