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

    },
  }
}
相关推荐
云原生指北4 分钟前
GitHub Copilot SDK 入门:五分钟构建你的第一个 AI Agent
java
用户69371750013843 小时前
Google 正在“收紧侧加载”:陌生 APK 安装或需等待 24 小时
android·前端
蓝帆傲亦3 小时前
Web 前端搜索文字高亮实现方法汇总
前端
用户69371750013843 小时前
Room 3.0:这次不是升级,是重来
android·前端·google
Leinwin4 小时前
OpenClaw 多 Agent 协作框架的并发限制与企业化规避方案痛点直击
java·运维·数据库
漫随流水4 小时前
旅游推荐系统(view.py)
前端·数据库·python·旅游
薛定谔的悦4 小时前
MQTT通信协议业务层实现的完整开发流程
java·后端·mqtt·struts
enjoy嚣士5 小时前
springboot之Exel工具类
java·spring boot·后端·easyexcel·excel工具类
罗超驿5 小时前
独立实现双向链表_LinkedList
java·数据结构·链表·linkedlist
踩着两条虫6 小时前
VTJ.PRO 核心架构全公开!从设计稿到代码,揭秘AI智能体如何“听懂人话”
前端·vue.js·ai编程