Vant的Tab切换后内容没更新怎么办?
我在用 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>
难道是我监听的事件不对?还是得手动强制刷新组件?
fetchData没接change事件传过来的 tab name 参数。Vant 的
@change事件会带一个参数,就是当前切换到的 tab 的 name 值。你得用这个参数去请求对应的数据。代码改一下:
你之前没加参数的话,
fetchData根本不知道要请求哪个状态的数据,所以一直用的初始值。另外如果用
watch监听activeTab变化也行,但用@change更直观,事件本身就为这场景设计的。