van-tabbar-item选中active数据变了,图标没变

van-tabbar-item选中active状态没变

1.在 van-tabbar 中,你需要使用 v-model 来绑定当前激活的 tab 的索引。确保你为 van-tabbar 组件绑定了正确的索引,并且这个索引是动态更新的。例如:

复制代码
    <van-tabbar v-model="active" @change="onChange">
      <van-tabbar-item icon="home-o">标签</van-tabbar-item>
      <van-tabbar-item icon="search">标签</van-tabbar-item>
      <van-tabbar-item icon="friends-o">标签</van-tabbar-item>
      <van-tabbar-item icon="setting-o">标签</van-tabbar-item>
    </van-tabbar>

2. 检查 active 值的动态更新

复制代码
export default {
  data() {
    return {
      active: 0 // 默认选中第一个标签
    };
  },
 methods: {
   
    onChange(event) {
      // event 的值为当前选中项的索引
      this.active = event
      console.log(this.active, 'active')

    },
  }
}
相关推荐
Cobyte2 分钟前
模板 DSL 解析器中的状态机设计
前端·javascript·vue.js
颜酱4 分钟前
# 02 | 搭骨架:用 LangGraph 编排 12 步工作流(思路)
前端·人工智能·后端
颜酱5 分钟前
02 | 搭骨架:用 LangGraph 编排 12 步工作流
前端·人工智能·后端
码上解惑7 分钟前
从 Dify 工作流说起:常用节点怎么选、怎样组合?
java·人工智能·ai·agent·dify·智能体·spring ai
无足鸟ICT10 分钟前
【RHCA+】查看变量
linux·运维·服务器
Kina_C20 分钟前
Linux DNS 服务器-从高速缓存到辅助 DNS 部署指南
linux·运维·服务器·dns
EasyGBS32 分钟前
ONVIF设备接入国标GB28181视频平台EasyGBS:不用国标也能一键拉流!
服务器·php·音视频
青山木1 小时前
Hot 100 --- 岛屿数量
java·数据结构·算法·leetcode·深度优先·广度优先
刘卓航众创芯云服务部1 小时前
Kimi K3复杂任务实测:我把团队最头疼的三个场景全跑了一遍
前端
程序员-珍1 小时前
报错下载android sdk失败
android·java