element-ui el-tabs响应式数据不起作用

本文档记录element-ui升级导致的问题

前端开发过程中,项目有时不得不升级element-ui,本以为升级很简单,然而发现升级后会存在一些问题
1.element-ui 从4.2版本左右升级到7.11版本导致el-tabs标签页组件响应式的数据,不再响应
有时我们需要在el-tab标签上自己加上样式,用到slot,在slot上绑定data中写入的数据,数据更新时,视图却不更新。代码类似下面的

// template中写的代码

  
    
       {{count}}
    
    我的行程
  
  消息中心
  角色管理
  定时任务补偿

// script中写的代码
export default{
....// 上面省略,只写data
data() {
return {
  activeName: "first",
    count: 0
}
}
}

业务逻辑就是,点击当前tab时,不显示当前tab对应的数值,点击其他tab并且count>0 时才会显示对应的数值。
但是切换tab时,count会根据接口返回值变化,当count>0时,该数值并不会显示,使用vue-develop-tool工具看到data中绑定的值,确实变化了。视图却没有响应
解决思路


 
  
    
       {{count}}
    
    我的行程
  
  消息中心
  角色管理
  定时任务补偿

data中加入isShowTabCount变量,默认false当请求接口后,用

this.$next(()=>{
    this.isShowTabCount = true
})

切换tab时,在click方法中先设置this.isShowTabCount = false,count获取之后,写入上面的代码,强行刷dom,这样就可以解决数据不实时响应的问题

你可能感兴趣的:(element-ui el-tabs响应式数据不起作用)