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')

    },
  }
}
相关推荐
mayaairi25 分钟前
Vue2 事件绑定完全指南:从入门到原理
前端·javascript·vue.js
鲨鱼辣钊2 小时前
【FastAPI筑基-Day19】APScheduler定时任务全实战|自动执行、动态启停、后台常驻
java·spring·fastapi
ℋᙚᵐⁱᒻᵉ鲸落6 小时前
移动端滑动手势冲突:overflow: auto导致外层横向滑动失效
前端·javascript·css·vue.js·html
学长毕业设计7 小时前
基于SpringBoot的公益基金管理系统(源码+文档+讲解视频)
java·spring boot·后端
Brilliantwxx7 小时前
【Linux】 进程(9)程序与进程地址空间(基础+进阶+面试题)
linux·运维·服务器·开发语言·c++
东小西7 小时前
【SAA实战】第 3 篇 · 工具调用全攻略:把业务能力交给 Agent 自己调度
java·后端·spring
东小西7 小时前
【SAA实战】第 4 篇 · Agent 短期记忆:saver 让 Agent 跨轮记得住(threadId 隔离)
java·后端·spring
许彰午7 小时前
22-DataCenter报文序列化
java·低代码·架构·状态模式
不怕犯错,就怕不做7 小时前
git prune 自动删除本地记录中那些远程已经不存在的分支引用
linux·服务器·git
2601_962065257 小时前
[MySQL] SQL优化之性能分析
java·sql·mysql