Vant的Tab切换后内容没更新怎么办?

♫梓童 阅读 4

我在用 Vant 的 Tab 组件做订单列表,三个 tab 分别是“全部”“待付款”“已完成”,但切换 tab 后页面内容没变,还是第一次加载的数据。

我试过在 @change 事件里重新请求接口,但好像没触发。代码大概是这样的:

<van-tabs v-model:active="activeTab" @change="fetchData">
  <van-tab title="全部" name="all"></van-tab>
  <van-tab title="待付款" name="unpaid"></van-tab>
  <van-tab title="已完成" name="finished"></van-tab>
</van-tabs>

难道是我监听的事件不对?还是得手动强制刷新组件?

我来解答 赞 3 收藏
二维码
手机扫码查看
1 条解答
南宫薪羽
问题在于你的 fetchData 没接 change 事件传过来的 tab name 参数。

Vant 的 @change 事件会带一个参数,就是当前切换到的 tab 的 name 值。你得用这个参数去请求对应的数据。

代码改一下:






你之前没加参数的话,fetchData 根本不知道要请求哪个状态的数据,所以一直用的初始值。

另外如果用 watch 监听 activeTab 变化也行,但用 @change 更直观,事件本身就为这场景设计的。
点赞
2026-03-20 11:00