Bug: tab-active doesn't work in animated tabs when it changed by data value

  • Framework7 version: [4.4.6]
  • Vue.js version: [2.6.10]
  • Platform and Target: [macOS 10.14.5 Chrome Browser, Safari etc.]

Describe the bug

f7-tabs with “animated” property doesn’t react on changing “tab-active” on f7-tab by data property. It will work only if default f7-tabs is used.

To Reproduce

Steps to reproduce the behavior:

  1. Create f7-tabs animated with several count of f7-tab’s.
  2. Try to change “tab-active” on f7-tabs by data prop, for example by button.

Expected behavior

Expected to changed tabs with animation.

Actual Behavior

Nothing happens, tabs haven’t changed.


  <f7-page :page-content="false">
      <!--Login form-->
      <!-- Meetup creation-->

I think i need to use app.tab.show("#tab-login", true) and add “animated” property to f7-tabs, but what if I perform It`s visibility by computed method which just returns true/false

so the problem has gone when I added computed method to tab-active instead of only this getter

  isTokenized: "profile/isTokenized"

Im not sure but I think that it’s not working(animating) when tab-active is based on getter property