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

    },
  }
}
相关推荐
未来之窗软件服务2 分钟前
服务器运维(十九)web服务管理Nginx UI介绍——东方仙盟炼气期
运维·服务器·服务器运维·东方仙盟
一起养小猫2 分钟前
LeetCode100天Day2-验证回文串与接雨水
java·leetcode
梦想的旅途25 分钟前
企业微信外部群消息自动化:模拟操作与工程化实现路径探讨
运维·服务器
清晓粼溪6 分钟前
Java登录认证解决方案
java·开发语言
Felixwb6668 分钟前
Python 爬虫框架设计:类封装与工程化实践
前端
广州华水科技9 分钟前
潜力榜单2025年单北斗GNSS位移监测高口碑产品推荐
前端
xinyu_Jina11 分钟前
OpenNana 提示词图库:多模态数据检索、分面搜索与前端性能工程
前端
液态不合群12 分钟前
查找算法详解
java·数据结构·算法
郝学胜-神的一滴14 分钟前
Linux C++ 守护进程开发指南
linux·运维·服务器·开发语言·c++·程序人生·性能优化
雨中飘荡的记忆15 分钟前
观察者模式:从理论到生产实践
java·设计模式