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

Questions
1
  • 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.

Code

<template>
  <f7-page :page-content="false">
    <f7-tabs>
      <!--Login form-->
      <f7-tab
        id="tab-login"
        class="page-content"
        :tab-active="!isTokenized">
        ...
      </f7-tab>
      <!-- Meetup creation-->
      <f7-tab
        id="tab-create-meetup"
        class="page-content"
        :tab-active="isTokenized">
       ...
      </f7-tab>
    </f7-tabs>
  </f7-page>
</template>
2

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

3

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

...mapGetters({
  isTokenized: "profile/isTokenized"
}),

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